Non synchronous value sets break cursor position about react-textarea-autosize HOT 9 CLOSED

Somehow, using the defaultvalue prop instead of the value prop fixes the issue and the cursor/caret works properly...

from react-textarea-autosize.

So basically use one or the other. Thanks @HadrienPierart!

// Uncontrolled.
<Textarea 
    defaultValue={this.state.foo} 
    onChange={(event) => this.setState({foo: event.target.value})}/>

// Controlled.
<Textarea value={this.state.foo}/>

from react-textarea-autosize.

addendum this may be a React bug. facebook/react#5386

Well something is definately causing this behavior in this component but not my other inputs so there is still something specific that this component but the async set may not be the actual issue.

from react-textarea-autosize.

A partial solution is to check if props and states have changed in shouldComponentUpdate.

This will work for most cases except typing [enter] in the middle of the text.

Hope to get a better solution

    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps, nextState) {
      for (const i in nextProps) {
        if (!(nextProps[i] ==  this.props[i])) {
          return true;
        }
      }
      for (const i in nextState) {
        if (!(nextState[i] == this.state[i])) {
          return true;
        }
      }
      return false;
    }

from react-textarea-autosize.

This is the same issue as seen here: reflux/refluxjs#43 (comment)

That's a link to a solution as well. Basically what @sohwendy is pointing to.

from react-textarea-autosize.

I don't think it has something w/ asynchronicity as I faced this issue w/ non-async code (sync redux action creator). It's a weird bug, b/c I render the same component in another part of the app, but it works fine.

from react-textarea-autosize.

I figured out what caused my issue: it was Modal component from react-overlays/react-bootstrap + any lib, that is child of Modal and is passing value to input/textarea from its local state. I confirmed this with 2 such libs (this one + my form validator). This case can be reproduced w/ the following scenario:

<Modal>
  <SomeLibThatPassesValueFormItsLocalStateToTextInputOrTextarea>
    <input type="text" value={props.value} />
  </SomeLibThatPassesValueFormItsLocalStateToTextInputOrTextarea>
</Modal>

On the props update I observe 2 re-renders in the input component:

• updater triggered
• updated value passed to the root component
• first render w/ obsolete props
• second w/ correct next props

This first render w/ obsolete props is the reason of this issue: input receives outdated (its current) value (at this point cursor is placed correctly), but next async update sets next value, vdom flushes this update and browser resets cursor position.

If I do this:

<SomeLibThatPassesValueFormItsLocalStateToTextInputOrTextarea>
  <Modal>
    <input type="text" value={props.value} />
  </Modal>
</SomeLibThatPassesValueFormItsLocalStateToTextInputOrTextarea>

There is only one render per update and everything works as expected.

It's quite late for me today, tomorrow I'll file an issue at react-overlays/react-bootstrap repo.

from react-textarea-autosize.

Issue: react-bootstrap/react-bootstrap#2323

from react-textarea-autosize.

I think there is no more issue here and going to close this now, if something stays unresolved, let me know and I reopen so we can work through it.

from react-textarea-autosize.