question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Selecting text in the input can lead to reset()

See original GitHub issue
  • downshift version: 1.27.1
  • node version: 8
  • npm version: 5.5.1 (But I believe all versions are concerned)

When clicking to select the text from the input that downshift controls, if you end the selection outside of the input it can end up resetting the input to the selectedItem value, while the user is actually trying to interact with the input and select the full text to replace it.

It is reproducible on the simplest version of downshift from the examples in this repo : https://codesandbox.io/s/6z67jvklw3

Steps to reproduce are the following :

  1. Type and select banana
  2. Change bananato bana
  3. Click on the input, slightly to the right of bana (so not directly on the text)
  4. Select the full text, and end the text selection outside of input The input is reset to banana, whereas you were trying to edit it.

(If this description is not perfectly clear, which I assume could be the case, I may do a video to demonstrate this, feel free to ask)

The problem clearly comes from https://github.com/paypal/downshift/blob/master/src/downshift.js#L832

Suggested solution: I believe a check could be added to know if the mouseDown event happened on the input, if it’s the case downshift should not reset. I tend to believe though that this reset on outerClick is not necessarily useful, as downshift is already resetting onBlur and I cannot see any use case right now where outerClick will happen, but not onBlur, except the one from this bug.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
jduthoncommented, Mar 1, 2018

I was thinking of something similar, even though I would personally go with a onMouseDown on the input and items, so the isMouseDown would still be useful as a boolean, maybe rename it to wasInnerMouseDown. And then just check if wasInnerMouseDown, if it’s true then just set it to false and that’s it as the mouseUp is matching it, otherwise do what is done now : reset the state and call onOuterClick. Advantage of this one I believe is not to listen to all the mouseDowns but only the one we are actually interested in.

0reactions
kentcdoddscommented, Mar 2, 2018

Thanks @jduthon!

I believe a check could be added to know if the mouseDown event happened on the input, if it’s the case downshift should not reset.

I think this makes sense. Feel free to make a pull request for that 👍

Thanks so much

Read more comments on GitHub >

github_iconTop Results From Across the Web

Selecting text in the input can lead to reset() #350 - GitHub
When clicking to select the text from the input that downshift controls, if you end the selection outside of the input it can...
Read more >
<input type="reset"> - HTML: HyperText Markup Language
Try entering some text into the text field, and then pressing the reset button. Adding a reset keyboard shortcut. To add a keyboard...
Read more >
Selecting all text in HTML text input when clicked
This will cause the text to show unless a value is entered, eliminating the need to select text or clear inputs.
Read more >
Solved: Text input will clear after user change selected o...
When the user change the combobox for example from small to medium the input box will reset or clear everytime the user changes...
Read more >
Canvas Power Apps - Resetting A Text Input Field - YouTube
This is a video aimed at showing you how easily it is to clear and reenter data into a text input field on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found