[useAutocomplete] Add option to disable selecting text on first focus
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Summary 💡
The text of the input is selected on first focus of input. Add a new prop to useAutocomplete to opt out of this behavior
Examples 🌈
add selectTextOnFirstFocus
prop that defaults to true
const handleClick = () => {
if (
firstFocus.current &&
inputRef.current.selectionEnd - inputRef.current.selectionStart === 0
) {
inputRef.current.focus();
selectTextOnFirstFocus && inputRef.current.select();
}
firstFocus.current = false;
};
Motivation 🔦
To make useAutocomplete more flexible.
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (7 by maintainers)
Top Results From Across the Web
[useAutocomplete] Add option to disable selecting text on first ...
So that you can use useAutoComplete without the input text being selected in the initial focus. Here is a work around for anyone...
Read more >Don't allow to focus out an autocomplete select - Stack Overflow
I need to force users to select an option from a list of items, created by jquery-ui autocomplete. I would like to disable...
Read more >React Autocomplete component - Material UI - MUI
The autocomplete is a normal text input enhanced by a panel of suggested options. The widget is useful for setting the value of...
Read more >jQuery UI Autocomplete
Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace...
Read more >Autocomplete | Angular Material
Set each option's value property to whatever you'd like the value of the text input to be when that option is selected. content_copy....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Sure
Hi, @oliviertassinari @Bebersohl , I am facing an issue with MUI autocomplete, whenever i assign aria attributes to autocomplete it breaks my css. Also when i focus on the input, i get an error
Uncaught TypeError: inputRef.current is null handleClick useAutocomplete.js:900
, please let me know how i will resolve this. I am assigning the aria attribute on input field<TextField {...params} label="please select" variant="outlined" inputProps={{ "aria-describedby":'some label' }} />