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

Merge pull request #32 from huytd/main

Browse Source 
fix: make input area auto-resizable
This commit is contained in:
Zaid Mukaddam 2024-12-30 19:01:29 +05:30 committed by GitHub
commit 3b946f9f64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
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",