[Autocomplete] Improve focus logic (#18286)

Author: oliviertassinari

docs/src/pages/components/autocomplete/CustomizedHook.js

@@ -124,7 +124,7 @@ const Listbox = styled('ul')`
 
 export default function CustomizedHook() {
   const {
-    getComboboxProps,
+    getRootProps,
     getInputLabelProps,
     getInputProps,
     getTagProps,
@@ -143,7 +143,7 @@ export default function CustomizedHook() {
 
   return (
     <div>
-      <div {...getComboboxProps()}>
+      <div {...getRootProps()}>
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
           {value.map((option, index) => (

docs/src/pages/components/autocomplete/CustomizedHook.tsx

@@ -124,7 +124,7 @@ const Listbox = styled('ul')`
 
 export default function CustomizedHook() {
   const {
-    getComboboxProps,
+    getRootProps,
     getInputLabelProps,
     getInputProps,
     getTagProps,
@@ -143,7 +143,7 @@ export default function CustomizedHook() {
 
   return (
     <div>
-      <div {...getComboboxProps()}>
+      <div {...getRootProps()}>
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
           {value.map((option: FilmOptionType, index: number) => (

docs/src/pages/components/autocomplete/UseAutocomplete.js

@@ -36,7 +36,7 @@ const useStyles = makeStyles(theme => ({
 export default function UseAutocomplete() {
   const classes = useStyles();
   const {
-    getComboboxProps,
+    getRootProps,
     getInputLabelProps,
     getInputProps,
     getListboxProps,
@@ -49,7 +49,7 @@ export default function UseAutocomplete() {
 
   return (
     <div>
-      <div {...getComboboxProps()}>
+      <div {...getRootProps()}>
         <label className={classes.label} {...getInputLabelProps()}>
           useAutocomplete
         </label>

docs/src/pages/components/autocomplete/UseAutocomplete.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function UseAutocomplete() {
   const classes = useStyles();
   const {
-    getComboboxProps,
+    getRootProps,
     getInputLabelProps,
     getInputProps,
     getListboxProps,
@@ -51,7 +51,7 @@ export default function UseAutocomplete() {
 
   return (
     <div>
-      <div {...getComboboxProps()}>
+      <div {...getRootProps()}>
         <label className={classes.label} {...getInputLabelProps()}>
           useAutocomplete
         </label>

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

@@ -55,7 +55,7 @@ The Autocomplete component uses this hook internally.
 import useAutocomplete from '@material-ui/lab/useAutocomplete';
 ```
 
-- 📦 [4 kB gzipped](/size-snapshot).
+- 📦 [4.5 kB gzipped](/size-snapshot).
 
 {{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}}
 

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

@@ -210,7 +210,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
   const PopperComponent = disablePortal ? DisablePortal : PopperComponentProp;
 
   const {
-    getComboboxProps,
+    getRootProps,
     getInputProps,
     getInputLabelProps,
     getPopupIndicatorProps,
@@ -282,7 +282,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
           },
           className,
         )}
-        {...getComboboxProps()}
+        {...getRootProps()}
         {...other}
       >
         {renderInput({

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

@@ -497,4 +497,56 @@ describe('<Autocomplete />', () => {
       expect(handleChange.callCount).to.equal(1);
     });
   });
+
+  describe('prop: autoComplete', () => {
+    it('add a completion string', () => {
+      const { getByRole } = render(
+        <Autocomplete
+          autoComplete
+          options={['one', 'two']}
+          renderInput={params => <TextField autoFocus {...params} />}
+        />,
+      );
+      const textbox = getByRole('textbox');
+      fireEvent.change(textbox, { target: { value: 'O' } });
+      expect(textbox.value).to.equal('O');
+      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+      expect(textbox.value).to.equal('one');
+      expect(textbox.selectionStart).to.equal(1);
+      expect(textbox.selectionEnd).to.equal(3);
+      fireEvent.keyDown(textbox, { key: 'Enter' });
+      expect(textbox.value).to.equal('one');
+      expect(textbox.selectionStart).to.equal(3);
+      expect(textbox.selectionEnd).to.equal(3);
+    });
+  });
+
+  describe('click input', () => {
+    it('toggles if empty', () => {
+      const { getByRole } = render(
+        <Autocomplete options={['one', 'two']} renderInput={params => <TextField {...params} />} />,
+      );
+      const textbox = getByRole('textbox');
+      const combobox = getByRole('combobox');
+      expect(combobox).to.have.attribute('aria-expanded', 'false');
+      fireEvent.mouseDown(textbox);
+      expect(combobox).to.have.attribute('aria-expanded', 'true');
+      fireEvent.mouseDown(textbox);
+      expect(combobox).to.have.attribute('aria-expanded', 'false');
+    });
+
+    it('selects all the first time', () => {
+      const { getByRole } = render(
+        <Autocomplete
+          value="one"
+          options={['one', 'two']}
+          renderInput={params => <TextField {...params} />}
+        />,
+      );
+      const textbox = getByRole('textbox');
+      fireEvent.click(textbox);
+      expect(textbox.selectionStart).to.equal(0);
+      expect(textbox.selectionEnd).to.equal(3);
+    });
+  });
 });

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

@@ -153,7 +153,7 @@ export interface UseAutocompleteProps {
 export default function useAutocomplete(
   props: UseAutocompleteProps,
 ): {
-  getComboboxProps: () => {};
+  getRootProps: () => {};
   getInputProps: () => {};
   getInputLabelProps: () => {};
   getClearProps: () => {};

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

@@ -93,6 +93,7 @@ export default function useAutocomplete(props) {
     }
   });
 
+  const firstFocus = React.useRef(true);
   const inputRef = React.useRef(null);
   const listboxRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -531,6 +532,14 @@ export default function useAutocomplete(props) {
           // We don't want to validate the form.
           event.preventDefault();
           selectNewValue(event, filteredOptions[highlightedIndexRef.current]);
+
+          // Move the selection to the end.
+          if (autoComplete) {
+            inputRef.current.setSelectionRange(
+              inputRef.current.value.length,
+              inputRef.current.value.length,
+            );
+          }
         } else if (freeSolo && inputValue !== '') {
           selectNewValue(event, inputValue);
         }
@@ -572,6 +581,7 @@ export default function useAutocomplete(props) {
 
   const handleBlur = event => {
     setFocused(false);
+    firstFocus.current = true;
 
     if (debug && inputValue !== '') {
       return;
@@ -640,6 +650,30 @@ export default function useAutocomplete(props) {
     }
   };
 
+  const handleMouseDown = event => {
+    if (event.target.nodeName !== 'INPUT') {
+      // Prevent blur
+      event.preventDefault();
+    }
+  };
+
+  const handleClick = () => {
+    if (
+      firstFocus.current &&
+      inputRef.current.selectionEnd - inputRef.current.selectionStart === 0
+    ) {
+      inputRef.current.select();
+    }
+
+    firstFocus.current = false;
+  };
+
+  const handleInputMouseDown = () => {
+    if (inputValue === '') {
+      handlePopupIndicator();
+    }
+  };
+
   let dirty = freeSolo && inputValue.length > 0;
   dirty = dirty || (multiple ? value.length > 0 : value !== null);
 
@@ -663,11 +697,13 @@ export default function useAutocomplete(props) {
   }
 
   return {
-    getComboboxProps: () => ({
+    getRootProps: () => ({
       'aria-owns': popupOpen ? `${id}-popup` : null,
       role: 'combobox',
       'aria-expanded': popupOpen,
       onKeyDown: handleKeyDown,
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
     }),
     getInputLabelProps: () => ({
       id: `${id}-label`,
@@ -678,6 +714,7 @@ export default function useAutocomplete(props) {
       onBlur: handleBlur,
       onFocus: handleFocus,
       onChange: handleInputChange,
+      onMouseDown: handleInputMouseDown,
       // if open then this is handled imperativeley so don't let react override
       // only have an opinion about this when closed
       'aria-activedescendant': popupOpen ? undefined : null,
@@ -693,16 +730,10 @@ export default function useAutocomplete(props) {
     getClearProps: () => ({
       tabIndex: -1,
       onClick: handleClear,
-      onMouseDown: event => {
-        event.preventDefault();
-      },
     }),
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       onClick: handlePopupIndicator,
-      onMouseDown: event => {
-        event.preventDefault();
-      },
     }),
     getTagProps: ({ index }) => ({
       key: index,
@@ -716,6 +747,7 @@ export default function useAutocomplete(props) {
       'aria-labelledby': `${id}-label`,
       ref: handleListboxRef,
       onMouseDown: event => {
+        // Prevent blur
         event.preventDefault();
       },
     }),