studio icon indicating copy to clipboard operation
studio copied to clipboard

[Dashboard] Add textarea widget

Open dong-king opened this issue 5 months ago • 0 comments

I need use textarea component in my dashboard project.

On the basis of the TextInput widget, I modified it to create an TextAreaInput widget. Input works fine, but the delete key and arrow keys are not functioning.

I made five modifications. These changes involve replacing HTMLInputElement with HTMLTextAreaElement and replacing input with textarea.

function TextInputWidgetInput(...) {
    const ref = React.useRef<**HTMLTextAreaElement**>(null);   // This is the modified part
    const [cursor, setCursor] = React.useState<number | null>(null);

    React.useEffect(() => {
        const input = ref.current;
        if (input) input.setSelectionRange(cursor, cursor);
    }, [ref, cursor, value]);

    const handleKeyDown = (event: React.KeyboardEvent<**HTMLTextAreaElement**>) => {   // This is the modified part
        ....
    };

    return (
        <>
            <**textarea**  // This is the modified part
                ref={ref}
                **// type={password ? "password" : "text"}** // comment this line
                value={value}
                ....
            ></**textarea**>  // This is the modified part
        </>
    );
}

Is the widget class imposing any restrictions on these keys? Thanks.

dong-king avatar Sep 03 '24 04:09 dong-king