add a disableTags prop for Autocomplete

I’m not sure that is this a feature request or a bug fix in this example of Autocomplete component you used renderTags={() => null} to disable showing tags but when we do this tags will not be disabled completely and the handleKeyDown listener will be attached to component which cause removing selected elements using backspace in search box which is not which we need in this example

I think adding a disableTag={true} prop to AutoComplete component would be a good solution

[oliviertassinari]

@MHA15 Thanks for raising, this is concerning:

1. Navigate to http://0.0.0.0:3000/components/autocomplete#githubs-picker
2. Open the picker
3. Press <kbd>ArrowLeft</kbd>
4. 💥 TypeError: Cannot read property 'focus' of null

I think that the rendering logic of useAutocomplete should be more resilient, it should support missing tags. While I appreciate your proposal around disableTag, if feels that it’s something that is specific to the Autocomplete component. If we can get the same outcome with renderTags={() => null}, I think that we should rather go in this direction, it’s more explicit.

What do you think of this fix, considering a missing item as disabled? Do you want to work on a pull request? We would also need a regression test 😃.

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 3a7001d2d..661a812d8 100644
--- 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.
@@ -568,10 +568,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 {

[matthenschke]

Just submitted a pr based off of your suggestion @oliviertassinari, does anyone have any advice on mastering the material-ui codebase? https://github.com/mui-org/material-ui/pull/21460