[Autocomplete] Fix support for renderTags={() => null} (#21460)

mui · Jun 16, 2020 · 35d11d3 · 35d11d3
1 parent a953f2e
commit 35d11d3
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 deletions.
diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.js b/docs/src/pages/components/autocomplete/GitHubLabel.js
@@ -185,7 +185,14 @@ export default function GitHubLabel() {
             popperDisablePortal: classes.popperDisablePortal,
           }}
           value={pendingValue}
-          onChange={(event, newValue) => {
+          onChange={(event, newValue, reason) => {
+            if (
+              event.type === 'keydown' &&
+              event.key === 'Backspace' &&
+              reason === 'remove-option'
+            ) {
+              return;
+            }
             setPendingValue(newValue);
           }}
           disableCloseOnSelect

diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.tsx b/docs/src/pages/components/autocomplete/GitHubLabel.tsx
@@ -187,7 +187,14 @@ export default function GitHubLabel() {
             popperDisablePortal: classes.popperDisablePortal,
           }}
           value={pendingValue}
-          onChange={(event, newValue) => {
+          onChange={(event, newValue, reason) => {
+            if (
+              event.type === 'keydown' &&
+              (event as React.KeyboardEvent).key === 'Backspace' &&
+              reason === 'remove-option'
+            ) {
+              return;
+            }
             setPendingValue(newValue);
           }}
           disableCloseOnSelect

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -9,6 +9,7 @@ import { act, createClientRender, fireEvent, screen } from 'test/utils/createCli
 import { createFilterOptions } from '../useAutocomplete/useAutocomplete';
 import Autocomplete from './Autocomplete';
 import TextField from '@material-ui/core/TextField';
+import Chip from '@material-ui/core/Chip';
 
 describe('<Autocomplete />', () => {
   const mount = createMount();
@@ -399,6 +400,36 @@ describe('<Autocomplete />', () => {
       expect(handleChange.args[0][1]).to.deep.equal([options[1]]);
       expect(textbox).toHaveFocus();
     });
+
+    it('should not crash if a tag is missing', () => {
+      const handleChange = spy();
+      const options = ['one', 'two'];
+      render(
+        <Autocomplete
+          {...defaultProps}
+          defaultValue={options}
+          options={options}
+          value={options}
+          renderTags={(value, getTagProps) =>
+            value
+              .filter((x, index) => index === 1)
+              .map((option, index) => <Chip label={option.title} {...getTagProps({ index })} />)
+          }
+          onChange={handleChange}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+          multiple
+        />,
+      );
+      const textbox = screen.getByRole('textbox');
+      const [firstSelectedValue] = screen.getAllByRole('button');
+
+      fireEvent.keyDown(textbox, { key: 'ArrowLeft' });
+      // skip value "two"
+      expect(firstSelectedValue).toHaveFocus();
+
+      fireEvent.keyDown(firstSelectedValue, { key: 'ArrowRight' });
+      expect(textbox).toHaveFocus();
+    });
   });
 
   it('should trigger a form expectedly', () => {

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -265,7 +265,7 @@ export default function useAutocomplete(props) {
       // Same logic as MenuList.js
       const nextFocusDisabled = disabledItemsFocusable
         ? false
-        : option && (option.disabled || option.getAttribute('aria-disabled') === 'true');
+        : !option || option.disabled || option.getAttribute('aria-disabled') === 'true';
 
       if ((option && !option.hasAttribute('tabindex')) || nextFocusDisabled) {
         // Move to the next element.
@@ -596,10 +596,10 @@ export default function useAutocomplete(props) {
 
       // Same logic as MenuList.js
       if (
-        option &&
-        (!option.hasAttribute('tabindex') ||
-          option.disabled ||
-          option.getAttribute('aria-disabled') === 'true')
+        !option ||
+        !option.hasAttribute('tabindex') ||
+        option.disabled ||
+        option.getAttribute('aria-disabled') === 'true'
       ) {
         nextFocus += direction === 'next' ? 1 : -1;
       } else {