Solvedreact select How to keep value in textbox search after choosing it

I saw option onBlurResetsInput to set whether to clear input on blur or not.

And I also want to do that after choosing a value. Please show me how to do?

Thanks in advance!

29 Answers

✔️Accepted Answer

lusa
108

@DaveOdden (and others) For V2- I was able to enable editable text by setting the inputValue prop on the Select to be whatever text I wanted to show in the input, which works, except for when I select a value in the dropdown, which appears to clear the input, but in actuality sets the opacity to 0. For that, I had to set opacity: 1 !important; in my own CSS for .myContainer input. It took days to figure this out but the input now behaves much better as you can click on the text, highlight it, the cursor appears at the end of the input like a normal text field.

The other thing I had to do was to make sure not to set blank text on the input when the input is focused- the current behavior just clears the input when you click on it, because there is a menu-close action happening which unintentionally sets a blank string on the input. For that, in my onInputChange handler, I do not set my local react state value when !value && action === 'menu-close, and simply return out of the callback so my component is not setting the inputValue to be an empty String.

Other Answers:

This would be useful – sometimes with a searchable Select the user may want to place the cursor in the currently selected value to alter it, or select part of the text to change/remove it.

The display value is misleading because it appears as though you can do this ^, but in fact you cannot. It might be worthwhile to add a keepInputValue.

Another way to potentially go about this would be to provide a custom renderer for the input itself.

Either way you'd want to use the input as the display for the selected value instead of the ValueRenderer. Although, there might be a clever way to approach this that supports both the ValueRenderer prop as well as keeping the selected value in the input.

@croxluis here is example , a little bit messy but what you ask is in index.js
https://codesandbox.io/s/rroxqy2nlo

@mshwery

This would be useful – sometimes with a searchable Select the user may want to place the cursor in the currently selected value to alter it, or select part of the text to change/remove it.

I think the ability to re-edit the input after selecting a value would be an excellent enhancement to the project. I will put up a PR to this effect if you don't mind.

I am also in need of this feature. The blinking cursor is causing an illusion of a text input interaction, degrading the usability of this component. The intent for my use case is to emulate the behavior of a text input with autocomplete.