[useAutocomplete] Add selectOnFocus prop (#19281)

docs/pages/api/autocomplete.md

@@ -73,6 +73,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name required">renderInput&nbsp;*</span> | <span class="prop-type">func</span> |  | Render the input.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* null |
 | <span class="prop-name">renderOption</span> | <span class="prop-type">func</span> |  | Render the option, use `getOptionLabel` by default.<br><br>**Signature:**<br>`function(option: T, state: object) => ReactNode`<br>*option:* The option to render.<br>*state:* The state of the component. |
 | <span class="prop-name">renderTags</span> | <span class="prop-type">func</span> |  | Render the selected value.<br><br>**Signature:**<br>`function(value: undefined, getTagProps: function) => ReactNode`<br>*value:* The `value` provided to the component.<br>*getTagProps:* A tag props getter. |
+| <span class="prop-name">selectOnFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">!props.freeSolo</span> | If `true`, the input's text will be selected on focus. |
 | <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the autocomplete. |
 | <span class="prop-name">value</span> | <span class="prop-type">any<br>&#124;&nbsp;array</span> |  | The value of the autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the `getOptionSelected` prop. |
 

docs/src/pages/components/autocomplete/autocomplete.md

@@ -32,7 +32,9 @@ Choose one country between 248.
 
 ## Free solo
 
-Set `freeSolo` to true so the textbox can contain any arbitrary value.
+Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search.
+
+However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus`.
 
 {{"demo": "pages/components/autocomplete/FreeSolo.js"}}
 

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -285,6 +285,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     renderInput,
     renderOption: renderOptionProp,
     renderTags,
+    selectOnFocus = !props.freeSolo,
     size = 'medium',
     value: valueProp,
     ...other
@@ -742,6 +743,10 @@ Autocomplete.propTypes = {
    * @returns {ReactNode}
    */
   renderTags: PropTypes.func,
+  /**
+   * If `true`, the input's text will be selected on focus.
+   */
+  selectOnFocus: PropTypes.bool,
   /**
    * The size of the autocomplete.
    */

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts

@@ -153,6 +153,10 @@ export interface UseAutocompleteCommonProps<T> {
    * Array of options.
    */
   options?: T[];
+  /**
+   * If `true`, the input's text will be selected on focus.
+   */
+  selectOnFocus?: boolean;
 }
 
 export interface UseAutocompleteMultipleProps<T> extends UseAutocompleteCommonProps<T> {

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js

@@ -107,6 +107,7 @@ export default function useAutocomplete(props) {
     onInputChange,
     open: openProp,
     options = [],
+    selectOnFocus = !props.freeSolo,
     value: valueProp,
     componentName = 'useAutocomplete',
   } = props;
@@ -746,7 +747,10 @@ export default function useAutocomplete(props) {
       inputRef.current.selectionEnd - inputRef.current.selectionStart === 0
     ) {
       inputRef.current.focus();
-      inputRef.current.select();
+
+      if (selectOnFocus) {
+        inputRef.current.select();
+      }
     }
 
     firstFocus.current = false;