eez-open / studio

Cross-platform low-code GUI and automation
https://www.envox.eu/studio/studio-introduction/
GNU General Public License v3.0
616 stars 101 forks source link

[Dashboard] Add textarea widget #513

Open dong-king opened 2 months ago

dong-king commented 2 months ago

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.