[Autocomplete] Fix filtering when value is already selected (#22935)

mui · Oct 9, 2020 · a652d4f · a652d4f
1 parent 0f6292e
commit a652d4f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.test.js b/packages/material-ui/src/Autocomplete/Autocomplete.test.js
@@ -2049,4 +2049,35 @@ describe('<Autocomplete />', () => {
       );
     });
   });
+
+  it('should filter options when new input value matches option', () => {
+    const handleChange = spy();
+    const { getAllByRole, getByRole } = render(
+      <Autocomplete
+        openOnFocus
+        options={['one', 'two']}
+        onChange={handleChange}
+        renderInput={(params) => <TextField autoFocus {...params} />}
+      />,
+    );
+    const textbox = getByRole('textbox');
+    const combobox = getByRole('combobox');
+
+    fireEvent.change(textbox, { target: { value: 'one' } });
+    fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+    fireEvent.keyDown(textbox, { key: 'Enter' });
+    expect(handleChange.callCount).to.equal(1);
+    expect(handleChange.args[0][1]).to.deep.equal('one');
+    expect(combobox).to.have.attribute('aria-expanded', 'false');
+
+    fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+    expect(combobox).to.have.attribute('aria-expanded', 'true');
+
+    expect(getAllByRole('option')).to.have.length(2);
+
+    fireEvent.change(textbox, { target: { value: 'on' } });
+    fireEvent.change(textbox, { target: { value: 'one' } });
+
+    expect(getAllByRole('option')).to.have.length(1);
+  });
 });
diff --git a/packages/material-ui/src/useAutocomplete/useAutocomplete.js b/packages/material-ui/src/useAutocomplete/useAutocomplete.js
@@ -177,6 +177,8 @@ export default function useAutocomplete(props) {
     state: 'open',
   });
 
+  const [inputPristine, setInputPristine] = React.useState(true);
+
   const inputValueIsSelectedValue =
     !multiple && value != null && inputValue === getOptionLabel(value);
 
@@ -197,7 +199,10 @@ export default function useAutocomplete(props) {
         }),
         // we use the empty string to manipulate `filterOptions` to not filter any options
         // i.e. the filter predicate always returns true
-        { inputValue: inputValueIsSelectedValue ? '' : inputValue, getOptionLabel },
+        {
+          inputValue: inputValueIsSelectedValue && inputPristine ? '' : inputValue,
+          getOptionLabel,
+        },
       )
     : [];
 
@@ -495,6 +500,7 @@ export default function useAutocomplete(props) {
     }
 
     setOpenState(true);
+    setInputPristine(true);
 
     if (onOpen) {
       onOpen(event);
@@ -811,6 +817,7 @@ export default function useAutocomplete(props) {
 
     if (inputValue !== newValue) {
       setInputValueState(newValue);
+      setInputPristine(false);
 
       if (onInputChange) {
         onInputChange(event, newValue, 'input');