React-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!
cnits
All 26 comments
Hey @cnits,
just had this issue myself.
You'll have to save the selected value somewhere (preferably in your state) and then pass it as value element to the Select on the next render.
Kind Regards,
Florian
DigitalFlow
on 23 Jul 2017
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.
mshwery
on 6 Aug 2017
any update on this?
jeremymarc
on 19 Oct 2017
2075
jeremymarc
on 19 Oct 2017
@cnits @jeremymarc See my comment on #2075
We already have backspaceRemoves that when explicitly set to false should satisfy your use case, right?
mcpolandc
on 20 Oct 2017
@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.
mcpolandc
on 20 Oct 2017
@mcpolandc @gwyneplaine I don't think "backspaceRemoves" is what we are talking about ; I would like when clicking in the search field to select the current value so you can delete it by typing any key, something like that:
Input field without focus
https://www.dropbox.com/s/6u5nl8cfu02ay41/Screenshot%202017-12-07%2013.12.44.png?dl=0
Input field with focus:
https://www.dropbox.com/s/k3ic6h4slxe41cl/Screenshot%202017-12-07%2013.13.05.png?dl=0
That was the purpose of my PR #2075
jeremymarc
on 7 Dec 2017
anything changed to this issue? It would be awesome to have options to edit the selected text to make new search (doesnt have to write from scratch the names to search)
magdalko
on 16 Jan 2018
I've been having a similar issue to @jeremymarc - here's an example app: https://codesandbox.io/s/q27lnon96
And here's the behaviour:
(The GIF isn't showing mouse clicks for some reason, apologies!)
Whether backspaceRemoves is set to false or true, the value still vanishes when Select loses focus (Although it's clearly still preserved in the state of the component, as it re-appears when Select gets focus back).
hollandmatt
on 6 Feb 2018
Also running into this issue - the behavior right now creates some usability issues. backspaceRemoves doesn't really address the problem.
Some use cases:
- User clicks into text field that has a value already set and sees a blinking cursor, indicating it's an editable text field. Then the user presses the backspace key.
- Expected behavior: the last character of the string should be deleted (normal behavior with a blinking caret)
- Actual behavior: the entire string is deleted (if
backspaceRemovesis set totrue), or nothing happens (ifbackspaceRemovesis set tofalse). Both of these behaviors are unexpected.
- The user clicks into the text field, sees a blinking cursor, and presses the left arrow key.
- Expected behavior: the blinking caret should shift one character to the left
- Actual behavior: no response
- The user clicks into text field, sees the blinking caret at the end of the line, and then tries to click in the middle of the string to change the caret location.
- Expected behavior: the blinking caret changes to the middle of the string, where the user clicked.
- Actual behavior: no response
Related issues (possibly duplicates): https://github.com/JedWatson/react-select/issues/164#issuecomment-366284492, #250, #2054, #2296
davidcalhoun
on 4 Apr 2018
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.
DaveOdden
on 24 Apr 2018
@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.
lusa
on 18 Jul 2018
Any update here?
speedo-sp7
on 30 Jul 2018
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.
I ran into this, too. Wondering why this is, and what the intended way of turning it off is.
huttj-liveperson
on 9 Aug 2018
I believe it's a bug, not a question, so please remove question tag and add bug tag to this issue!
dehghani-mehdi
on 21 Sep 2018
+1 for keeping the input value on focus loss
m-apsolon
on 28 Sep 2018
+1
mathiouchio
on 6 Dec 2018
I fixed it by this way
1- onInputChange:
handleSearch = (value, {action}) => {
if (action === 'menu-close' || action === 'input-blur' || action === 'set-value') {return}
else { this.setState({searchValue: value})}
};
2- onChange: (so it sets the value of your input same as you selected)
handleSelect = ({label, value, ...rest}) => {
this.setState({ searchValue: e.value })
}
and as @lusa mentioned we need to set opacity: 1 !important of the input field.
set inputId on props to easily change the opacity.
- i also set
display: noneto selectValue. so i can see just my normal input.
sebmaz93
on 10 Jan 2019
@TITAN9389 could you please post an example, I can not fix it.
croxluis
on 24 Jan 2019
@TITAN9389 could you please post an example, I can not fix it.
@croxluis okay will try to write a codesandbox example in few hours.
sebmaz93
on 24 Jan 2019
@croxluis here is example , a little bit messy but what you ask is in index.js
https://codesandbox.io/s/rroxqy2nlo
sebmaz93
on 24 Jan 2019
@TITAN9389 Great, exactly what I was looking for, thank you! One thing though that I noticed is that this solution does not seem to work well with the isClearable property: that is, the clear button is never displayed. Ideally, it would be nice if a clear button could be displayed as long as something is shown in the entry box.
Alatius
on 7 Apr 2019
@TITAN9389 Great, exactly what I was looking for, thank you! One thing though that I noticed is that this solution does not seem to work well with the isClearable property: that is, the clear button is never displayed. Ideally, it would be nice if a clear button could be displayed as long as something is shown in the entry box.
You're Welcome @Alatius
umm i'm not sure about that i need to try and see it, in case if you find a way to do it before me, feel free to share :) (i'm bit busy these days)
sebmaz93
on 7 Apr 2019
@TITAN9389 I sort of solved it. The problem was that no option actually was selected: I had to modify the handleSearchSelection function, to set searchSelection to the selected object, not just its value. See https://codesandbox.io/s/346918zzp1
So once an option is selected, the clear button will appear. This is a partial solution to what I wanted, but to make the clear button appear when just something is entered (but nothing actually selected in the menu) will demand hacking the Select component code, so I'll leave that for now.
Alatius
on 7 Apr 2019
@TITAN9389 This really deserves a +1! Thank you so much, this finally finally fixed my problem. onblur! Should have thought of that.
abrahamrhoffman
on 21 Jul 2020
Greetings all, I have addressed this in several other places and started a discussion about making this potentially easier but the approach is fairly straight forward to roll on your own.
- Create a custom Input to ensure isHidden is always false
const Input = props => <components.Input {...props, isHidden: false } />
- Make the input controlled so we can override the inputValue when an option is selected or the input is blurred.
const [value, setValue] = useState();
const [inputValue, setInputValue] = useState("");
const onInputChange = (inputValue, { action }) => {
// onBlur => setInputValue to last selected value
if (action === "input-blur") {
setInputValue(value ? value.label : "");
}
// onInputChange => update inputValue
else if (action === "input-change") {
setInputValue(inputValue);
}
};
const onChange = (option) => {
setValue(option);
setInputValue(option ? option.label : "");
};
- Hide the rendered value component with the prop
controlShouldRenderValue
Putting this all together looks like this...
const Input = props => <components.Input {...props, isHidden: false } />
const [value, setValue] = useState();
const [inputValue, setInputValue] = useState("");
const onInputChange = (inputValue, { action }) => {
// onBlur => setInputValue to last selected value
if (action === "input-blur") {
setInputValue(value ? value.label : "");
}
// onInputChange => update inputValue
else if (action === "input-change") {
setInputValue(inputValue);
}
};
const onChange = (option) => {
setValue(option);
setInputValue(option ? option.label : "");
};
return (<Select
value={value}
inputValue={inputValue}
onInputChange={onInputChange}
onChange={onChange}
controlShouldRenderValue={false}
components={{ Input }}
...
/>)
Here is the corresponding sandbox which allows the user to freely type and edit into the input as would be expected behavior of an input.
That said, there is a dedicated discussion to share more thoughts if this were to be an internal prop to manage this, but in lieu of that, it is possible to accomplish this nonetheless.
As such, I will be closing this issue as more discussion about this can be had in the discussions channel with the provided link above.
ebonow
on 2 Dec 2020
Related issues
coder-guy22296
·
3Comments
batusai513
·
3Comments
Meesam
·
3Comments
juliensnz
·
3Comments
pgoldweic
·
3Comments
Most helpful comment
@DaveOdden (and others) For V2- I was able to enable editable text by setting the
inputValueprop on theSelectto 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 setopacity: 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-closeaction happening which unintentionally sets a blank string on the input. For that, in myonInputChangehandler, I do not set my local react state value when!value && action === 'menu-close, and simplyreturnout of the callback so my component is not setting the inputValue to be an empty String.