NikitolProject/miniperplx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make input area auto-resizable

Browse Source
This commit is contained in:
Huy Tran 2024-12-29 23:10:30 -08:00
parent 38eff29165
commit 8109861a77
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/ui/form-component.tsx
View File

@ -634,8 +634,20 @@ const FormComponent: React.FC<FormComponentProps> = ({
const postSubmitFileInputRef = useRef<HTMLInputElement>(null);
const [isFocused, setIsFocused] = useState(false);
const autoResizeInput = (target: HTMLTextAreaElement) => {
if (target) {
target.style.height = 'auto'; // trigger recalculate scrollHeight
let additionalLineHeight = 0;
if (target.value) {
additionalLineHeight = parseFloat(window.getComputedStyle(target).lineHeight);
}
target.style.height = `${target.scrollHeight + additionalLineHeight}px`;
}
};
const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setInput(event.target.value);
autoResizeInput(event.target);
};
const handleFocus = () => {
@ -800,7 +812,7 @@ const FormComponent: React.FC<FormComponentProps> = ({
onFocus={handleFocus}
onBlur={handleBlur}
className={cn(
"min-h-[40px] max-h-[200px] w-full resize-none rounded-lg",
"min-h-[40px] w-full resize-none rounded-lg",
"overflow-y-auto overflow-x-hidden",
"text-base leading-relaxed",
"bg-neutral-100 dark:bg-neutral-900",
@ -889,4 +901,4 @@ const FormComponent: React.FC<FormComponentProps> = ({
);
};
export default FormComponent;
export default FormComponent;