CODEWITHSUNDEEP
javascripthtmlcssreactjs
Daniel
Daniel

Reputation: 165

React onChange not triggering from Div

I'm working on an app that has a reusable component that generates text areas when needed. This component receives an onChange function as a prop from its parent with the prop name onChange. The existing code uses a textarea element that has a consistent height, and this textarea triggers the onChange function without issue.

I am now working on getting the area to grow vertically instead of adding an overflow bar, and have replaced the textarea tag with a div, which allows the autogrowth to work as expected. However, the div tag will no longer trigger the onChange prop that the textarea element triggered without issue. I'm able to confirm that the onChange prop carries the same function over, but I'm stumped as to why it won't work. I was wondering if there is something that I'm missing in my code, or if I'm misunderstanding about how onChange functions work within React. I've pasted the original code and my best guess at what the updated code should look like, although I've tried multiple changes on the div.

Thanks in advance for any help on this!

Original textarea code:

<textarea className={textAreaStyle} {...textareaProps} rows={rows} />

Updated div code:

      <div
        className={textAreaStyle}
        rows={rows}
        contentEditable="true"
        {...textareaProps}
        onChange={props.onChange}
      >            
        {value}
      </div>

Update 1: I've tried replacing the line onChange={props.onChange} with onInput={props.onChange}, and now the function is being hit, but the actual state isn't being updated. Seeing if I can fix the state not being updated to resolve this issue.

Upvotes: 1

Views: 5777

Answers (3)

Daniel
Daniel

Reputation: 165

I was able to fix this by using adding a small function in the parent component and then calling it as a prop in an onInput function, while leaving the onChange function set to props.onChange. The function was taken from the article below.

http://usefulangle.com/post/41/javascript-textarea-autogrow-adjust-height-based-on-content

Upvotes: 0

Allen Wong
Allen Wong

Reputation: 1433

even added content-editable=true, div won't trigger onChange event, why dont you use textarea instead, use css to disable resize and overflow, otherwise you need to listen 'input' event for div, see contenteditable change events

anyway, I think all you need is https://www.npmjs.com/package/react-autosize-textarea

Upvotes: 1

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15851

Contenteditable behaviour and events differs from Texarea element so I suggest to take a look to out-of-the-box working component like:

https://github.com/lovasoa/react-contenteditable

If you are looking for autosize in textarea you can rely on UI Kit like Semantic UI React.

If you are looking for a custom solution there are still complete answers available on topic:

React.js: onChange event for contentEditable

Upvotes: 1

Related Questions