Prop(s) to keep input visible and retain inputValue

[ebonow]

Currently, the behavior of a react-select is such that when an option is chosen from the menu:

• The inputValue is cleared out
• The input element's opacity is set to 0
• A SingleValue (or MultiValue if set to be a multi select) is rendered and positioned absolutely over the top of the now hidden input.

This has caused confusion for some users as the selected option label appears in the place of the input, but when the user tries to interact with it after its been selected, the cursor is instead positioned at the beginning of the text (since the input field is empty) and any character press will clear out the SingleValue instead of editing the input text as the user might expect of an input element.

I have created a codesandbox here demonstrating that it's still possible to create this behavior with the provided tools, though it requires a bit of brute force to override the inline opacity style passed to the input and could be much easier by addressing this line of code.

I think adding more complexity and code is something worth discussing and it's not without side effects. I think there are several questions related to this along with personal thoughts about answering some questions about the approch.

1. Is it worth creating a prop to allow the input to always remain visible without clearing out the input text?

My answer would be yes. I believe this is a common enough use-case where a user may mis-click an option or simply want to change some input text. The default styling of the SingleValue and the Input are also similar enough that it can be misleading.

2. What should this prop name be called?

Not sure on this. I have considered several options:

• keepCursorAtEnd was suggested here, but it seems like this does not accurately describe the actual behavior described above.
• isInputEditable
• hideInputOnSelect
• autoHideInput
• controlShouldHideInput
• Any other suggestions are welcome...

3. Should the SingleValue still be rendered even though it would likely overlap?

My answer would be yes. While most users would only need to render the input, there is still the ability to set controlShouldRenderValue to false to to not break users who are using the rendered selected value elsewhere especially when using a formatOptionLabel function where context === 'value'

4. What happens when edited text no longer matches a value (ie: Select option -> 'blue', change input text to bluee, what should be the selected value?)

My answer would be that any input text that does not match an option value reverts back to the label of the selected option (unless clearing the value).

Maybe it's one new prop, maybe several, maybe none, but at the end of the day, would love to know others thoughts.

[ebonow]

Exploring a bit more, I found that using a custom Input with the prop isHidden set to false accomplishes the visibility portion of this. Adding the onChange and onInputChange would be nice and has been suggested in other PRs/issues, but feel that this is straight forward enough to include in my own wrapper of react-select.

const Input = props => <components.Input {...props} isHidden={false} />

return <Select components={{Input}} ... />

[adriandmitroca]

Custom Input component with isHidden={false} doesn't seem to be working nowadays for Creatable selects.

[Rall3n]

@adriandmitroca Can not confirm. Did you make sure that the overwrite happens after you spread your props onto the component?

// `isHidden=false` will be overwritten by `props.isHidden`
const Input = props => <component.Input isHidden={false} {...props} />

// `isHidden` is not being overwritten by `props.isHidden`
const Input = props => <components.Input {...props} isHidden={false} />

[adriandmitroca]

Yes I did, I managed to work the solution though, but pretty much had to add onChange, onInputChange and onFocusChange as in the initial example on Code Sandbox unfortunately.

[alexandernst]

Any progress on this?

The proposed workaround doesn't seem to be working with Creatable (at least I didn't manage to make it work).

[lucaseneasneves]

Any update on this? Trying to use the workaround with the AsyncSelect but every fetch the input loses focus.

[dkrefta]

2023 and still with the problem.

[rachitiitr]

2024 and its tragic we haven't been able to close this.

[volkandkaya]

  // const onFocus = () => value && selectRef.current.select.inputRef.select();
  const onFocus = () => value && selectRef.current.inputRef.select();

Had to remove select from onFocus. Would be nice to have a prop for this instead. I wonder how much dev time has been wasted manually trying to get it working and adding all this extra useState.