fix: cursor jumping to end of input #229
Conversation
provide an onInputValueChange callback to allow to update controlled prop before its old value is used to re-render the children causing the cursor in the input to jump to the end in the next render downshift-js#217
Codecov Report
@@ Coverage Diff @@
## master #229 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 4 4
Lines 271 273 +2
Branches 63 64 +1
=====================================
+ Hits 271 273 +2
Continue to review full report at Codecov.
|
| @@ -268,6 +270,14 @@ class Downshift extends Component { | |||
| internalSetState(stateToSet, cb) { | |||
| let onChangeArg | |||
| const onStateChangeArg = {} | |||
|
|
|||
| if (stateToSet.hasOwnProperty('inputValue')) { | |||
There was a problem hiding this comment.
Better be careful here. stateToSet can be a function. Also, this.getStateAndHelpers() will get us the old state, not any of the new state. So let's move this down to right before return nextState and then we can do:
this.props.onInputValueChange(
stateToSet.inputValue,
{...this.getStateAndHelpers(), ...nextState},
)Thoughts?
There was a problem hiding this comment.
Wouldn't this cause inputValue being read from stale props again?
There was a problem hiding this comment.
Nope, because nextState will have the inputValue.
But actually, it should probably be this instead:
this.props.onInputValueChange(
stateToSet.inputValue,
{...this.getStateAndHelpers(), ...stateToSet},
)And we could put it right below stateToSet.type = ...
There was a problem hiding this comment.
Tried that here, but placing the onInputValueChange inside the setState function, causes the children to re-render with the old value once, still leading to the cursor jumping to the end.
|
Sorry, I need to close this PR. github is not updating new commits in here. I can't figure out why. Will open a new one. |
#217
What:
Provide an onInputValueChange callback to allow to update controlled prop before its old value is used to re-render the children, causing the cursor in the input to jump to the end in the next render.
Why:
fixes #217
Checklist:
@kentcdodds I'd like to get your opinion on this change before adding documentation for it.
Do you think this is a direction worth pursuing?