1

I have linked a code sandbox sample program Sample Program, here we can notice once we select an item from the options still it is in a focused state, but I don't want it to get focused after selecting an option.

Can Someone please help on this to overcome this problem, Thanks in Advance :)

Dante1021
  • 304
  • 7
  • 20
  • The focused state is working as intended. If you really don't want that feature though, you can try programmatically changing the focus on selection or changing focus to another element after selection. – TetroRL May 05 '22 at 11:54
  • @TrayDenney But I don't have any other element to get focused on, that's why I just need it to get focused out once it is selected. – Dante1021 May 05 '22 at 12:06
  • Check this answer, it may help you:https://stackoverflow.com/questions/3995524/is-it-possible-to-change-document-activeelement-in-javascript – Medi May 05 '22 at 12:17
  • 1
    Everything is okay in the "Sample Program" instead of one thing. You're providing string as a value to `blurOnSelect` like `blurOnSelect="true"` you have to change it to `blurOnSelect={true}`, or just pass the props like this `blurOnSelect` it is shortcut from `blurOnSelect={true}` – programmer May 05 '22 at 12:56
  • @programmer Thanks man, the issue got resolved now. – Dante1021 May 05 '22 at 13:01

1 Answers1

7

Add blurOnSelect prop to Autocomplete

<Autocomplete
    {...otherProps}
    blurOnSelect    // <== Here
/>

From Mui Autocomplete Documentation:
https://mui.com/material-ui/api/autocomplete :

blurOnSelect: 'mouse' | 'touch' | bool
Default: false

Amr Eraky
  • 1,423
  • 7
  • 13