How to use textarea and change input size on node in react-flow?

Question

I want to use a textarea instead of input and change the input size using a default drag icon on the bottom right(like photo below) on a node in react-flow app, so I changed the input tag to textarea.

In this case, I can see the drag icon of textarea, but I can't use it and then node moves.

How can I change the input size in textarea on node?

MindMapNode.jsx

import {useLayoutEffect, useEffect, useRef} from 'react';
import {Handle, Position} from 'reactflow';

import useStore from '../store';

import DragIcon from './DragIcon';


function MindMapNode({id, data}) {
    const inputRef = useRef(null);
    const updateNodeLabel = useStore((state) => state.updateNodeLabel);

    useEffect(() => {
        setTimeout(() => {
            inputRef.current?.focus({preventScroll: true});
        }, 1);
    }, []);

    useLayoutEffect(() => {
        if (inputRef.current) {
            inputRef.current.style.width = `${data.label.length * 8}px`;
        }
    }, [data.label.length]);

    return (
        <>
            <div className="inputWrapper">
                <div className="dragHandle">
                    <DragIcon/>
                </div>
                <textarea
                    value={data.label}
                    onChange={(evt) => updateNodeLabel(id, evt.target.value)}
                    className="input"
                    ref={inputRef}
                />
            </div>

            <Handle type="target" position={Position.Top}/>
            <Handle type="source" position={Position.Top}/>
        </>
    );
}

export default MindMapNode;

Other files are based on reactflow official github https://github.com/xyflow/react-flow-mindmap-app/tree/main

node: 20.10.0

react: 18.2.0

reactflow: 11.10.1

Abubakr · Accepted Answer · 2024-01-15 09:17:16Z

4

You can disable node drag by adding nodrag nopan class to your textarea tag it should enable default drag resize function

answered Jan 15, 2024 at 9:17

Abubakr

711 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Shyan Roy Choudhury · Accepted Answer · 2024-02-19 22:28:31Z

0

Adding nodrag in className for the textarea should do the trick. You would then be able to resize the inputbox.

answered Feb 19, 2024 at 22:28

Shyan Roy Choudhury

295 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to use textarea and change input size on node in react-flow?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related