[autocomplete] Enable clearing highlight when mouse leaves popup (#48354)

Author: mj12albert

docs/data/material/components/autocomplete/AutocompleteHint.js

@@ -24,6 +24,7 @@ export default function AutocompleteHint() {
         setInputValue(newValue && newValue.label ? newValue.label : '');
       }}
       disablePortal
+      resetHighlightOnMouseLeave
       inputValue={inputValue}
       id="combo-box-hint-demo"
       options={top100Films}

docs/data/material/components/autocomplete/AutocompleteHint.tsx

@@ -24,6 +24,7 @@ export default function AutocompleteHint() {
         setInputValue(newValue && newValue.label ? newValue.label : '');
       }}
       disablePortal
+      resetHighlightOnMouseLeave
       inputValue={inputValue}
       id="combo-box-hint-demo"
       options={top100Films}

docs/data/material/components/autocomplete/FreeSolo.js

@@ -8,11 +8,13 @@ export default function FreeSolo() {
       <Autocomplete
         id="free-solo-demo"
         freeSolo
+        resetHighlightOnMouseLeave
         options={top100Films.map((option) => option.title)}
         renderInput={(params) => <TextField {...params} label="freeSolo" />}
       />
       <Autocomplete
         freeSolo
+        resetHighlightOnMouseLeave
         id="free-solo-2-demo"
         disableClearable
         options={top100Films.map((option) => option.title)}
@@ -33,6 +35,7 @@ export default function FreeSolo() {
       <Autocomplete
         id="free-solo-demo3"
         freeSolo
+        resetHighlightOnMouseLeave
         options={top100Films}
         renderInput={(params) => (
           <TextField {...params} label="freeSolo (handle string values)" />

docs/data/material/components/autocomplete/FreeSolo.tsx

@@ -8,11 +8,13 @@ export default function FreeSolo() {
       <Autocomplete
         id="free-solo-demo"
         freeSolo
+        resetHighlightOnMouseLeave
         options={top100Films.map((option) => option.title)}
         renderInput={(params) => <TextField {...params} label="freeSolo" />}
       />
       <Autocomplete
         freeSolo
+        resetHighlightOnMouseLeave
         id="free-solo-2-demo"
         disableClearable
         options={top100Films.map((option) => option.title)}
@@ -33,6 +35,7 @@ export default function FreeSolo() {
       <Autocomplete
         id="free-solo-demo3"
         freeSolo
+        resetHighlightOnMouseLeave
         options={top100Films}
         renderInput={(params) => (
           <TextField {...params} label="freeSolo (handle string values)" />

docs/data/material/components/autocomplete/FreeSoloCreateOption.js

@@ -66,6 +66,7 @@ export default function FreeSoloCreateOption() {
       }}
       sx={{ width: 300 }}
       freeSolo
+      resetHighlightOnMouseLeave
       renderInput={(params) => (
         <TextField {...params} label="Free solo with text demo" />
       )}

docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx

@@ -66,6 +66,7 @@ export default function FreeSoloCreateOption() {
       }}
       sx={{ width: 300 }}
       freeSolo
+      resetHighlightOnMouseLeave
       renderInput={(params) => (
         <TextField {...params} label="Free solo with text demo" />
       )}

docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js

@@ -97,6 +97,7 @@ export default function FreeSoloCreateOptionDialog() {
         }}
         sx={{ width: 300 }}
         freeSolo
+        resetHighlightOnMouseLeave
         renderInput={(params) => <TextField {...params} label="Free solo dialog" />}
       />
       <Dialog open={open} onClose={handleClose}>

docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx

@@ -97,6 +97,7 @@ export default function FreeSoloCreateOptionDialog() {
         }}
         sx={{ width: 300 }}
         freeSolo
+        resetHighlightOnMouseLeave
         renderInput={(params) => <TextField {...params} label="Free solo dialog" />}
       />
       <Dialog open={open} onClose={handleClose}>

docs/data/material/components/autocomplete/GoogleMaps.js

@@ -192,6 +192,7 @@ export default function GoogleMaps() {
       autoComplete
       includeInputInList
       filterSelectedOptions
+      resetHighlightOnMouseLeave
       value={value}
       noOptionsText="No locations"
       onChange={(event, newValue) => {

docs/data/material/components/autocomplete/GoogleMaps.tsx

@@ -210,6 +210,7 @@ export default function GoogleMaps() {
       autoComplete
       includeInputInList
       filterSelectedOptions
+      resetHighlightOnMouseLeave
       value={value}
       noOptionsText="No locations"
       onChange={(event: any, newValue: PlaceType | null) => {