add regression test

mui · Feb 22, 2020 · 8a17bb8 · 8a17bb8
1 parent 9d73c31
commit 8a17bb8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -913,6 +913,25 @@ describe('<Autocomplete />', () => {
       expect(textbox.selectionStart).to.equal(0);
       expect(textbox.selectionEnd).to.equal(3);
     });
+
+    it('should focus the input when clicking on the open action', () => {
+      const { getByRole, queryByTitle } = render(
+        <Autocomplete
+          {...defaultProps}
+          value="one"
+          options={['one', 'two']}
+          renderInput={params => <TextField {...params} />}
+        />,
+      );
+
+      const textbox = getByRole('textbox');
+      fireEvent.click(textbox);
+      expect(textbox).to.have.focus;
+      textbox.blur();
+
+      fireEvent.click(queryByTitle('Open'));
+      expect(textbox).to.have.focus;
+    });
   });
 
   describe('controlled', () => {
@@ -1141,8 +1160,7 @@ describe('<Autocomplete />', () => {
       fireEvent.click(firstOption);
       expect(textbox).to.not.have.focus;
 
-      const opener = queryByTitle('Open');
-      fireEvent.click(opener);
+      fireEvent.click(queryByTitle('Open'));
       expect(textbox).to.have.focus;
       firstOption = getByRole('option');
       fireEvent.touchStart(firstOption);
@@ -1166,8 +1184,7 @@ describe('<Autocomplete />', () => {
       fireEvent.click(firstOption);
       expect(textbox).to.have.focus;
 
-      const opener = queryByTitle('Open');
-      fireEvent.click(opener);
+      fireEvent.click(queryByTitle('Open'));
       firstOption = getByRole('option');
       fireEvent.touchStart(firstOption);
       fireEvent.click(firstOption);
@@ -1191,8 +1208,7 @@ describe('<Autocomplete />', () => {
       fireEvent.click(firstOption);
       expect(textbox).to.have.focus;
 
-      const opener = queryByTitle('Open');
-      fireEvent.click(opener);
+      fireEvent.click(queryByTitle('Open'));
       firstOption = getByRole('option');
       fireEvent.click(firstOption);
       expect(textbox).to.not.have.focus;

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-constant-condition */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { setRef, useEventCallback, useControlled } from '@material-ui/core/utils';
+import { setRef, useEventCallback, useControlled, ownerDocument } from '@material-ui/core/utils';
 
 // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
 // Give up on IE 11 support for this feature
@@ -126,6 +126,7 @@ export default function useAutocomplete(props) {
   const ignoreFocus = React.useRef(false);
   const firstFocus = React.useRef(true);
   const inputRef = React.useRef(null);
+  const doc = ownerDocument(inputRef.current);
   const listboxRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -405,7 +406,6 @@ export default function useAutocomplete(props) {
       onOpen(event);
     }
     if (!isOpenControlled) {
-      inputRef.current.focus();
       setOpenState(true);
     }
   };
@@ -558,15 +558,13 @@ export default function useAutocomplete(props) {
           // Prevent scroll of the page
           event.preventDefault();
           changeHighlightedIndex('start', 'next');
-          handleOpen(event);
         }
         break;
       case 'End':
         if (popupOpen) {
           // Prevent scroll of the page
           event.preventDefault();
           changeHighlightedIndex('end', 'previous');
-          handleOpen(event);
         }
         break;
       case 'PageUp':
@@ -770,24 +768,23 @@ export default function useAutocomplete(props) {
     }
   };
 
-  // Focus the input when first interacting with the combobox
+  // Focus the input when interacting with the combobox
   const handleClick = () => {
+    inputRef.current.focus();
+
     if (
+      selectOnFocus &&
       firstFocus.current &&
       inputRef.current.selectionEnd - inputRef.current.selectionStart === 0
     ) {
-      inputRef.current.focus();
-
-      if (selectOnFocus) {
-        inputRef.current.select();
-      }
+      inputRef.current.select();
     }
 
     firstFocus.current = false;
   };
 
   const handleInputMouseDown = event => {
-    if (inputValue === '' && (!disableOpenOnFocus || inputRef.current === document.activeElement)) {
+    if (inputValue === '' && (!disableOpenOnFocus || inputRef.current === doc.activeElement)) {
       handlePopupIndicator(event);
     }
   };