Sitelet https://web.archive.org/web/20210825053235/https://github.com/mui-org/material-ui/issues/27933
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Autocomplete] ArrowLeft key press throws an error when setting renderTags to return null. #27933

Open
2 tasks done
Phebonacci opened this issue Aug 23, 2021 · 1 comment · May be fixed by #27949
Open
2 tasks done

[Autocomplete] ArrowLeft key press throws an error when setting renderTags to return null. #27933

Phebonacci opened this issue Aug 23, 2021 · 1 comment · May be fixed by #27949

Comments

@Phebonacci
Copy link
Task lists! Give feedback

@Phebonacci Phebonacci commented Aug 23, 2021 •

When the ArrowLeft key is pressed while there are selected options and renderTags is set to return null (so that no tags are rendered), the component breaks.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When the ArrowLeft key is pressed while there are selected options and renderTags is set to return null (so that no tags are rendered), the component breaks and returns the error describe below:

image

It appears that the useAutocomplete hook tries to put focus on the tag elements without checking whether there are tags rendered or not as per the source code:

  const focusTag = useEventCallback((tagToFocus) => {
    if (tagToFocus === -1) {
      inputRef.current.focus();
    } else {
      anchorEl.querySelector(`[data-tag-index="${tagToFocus}"]`).focus(); // <-- The line in question.
    }
  });

Expected Behavior 🤔

When the ArrowLeft key is pressed while there are selected options and renderTags is set to return null, it shouldn't try to put focus on tags.

Steps to Reproduce 🕹

Codesandbox link: https://codesandbox.io/s/nt24o
Taken from: https://material-ui.com/components/autocomplete/#githubs-picker

Steps:

  1. Open the Autocomplete component by clicking on Labels.
  2. Make sure there are options selected.
  3. Make sure the Autocomplete input field is focused.
  4. Press the ArrowLeft key. Error should appear.

Context 🔦

We are trying to build a component similar to the Github Labels picker sample provided by the docs: https://material-ui.com/components/autocomplete/#githubs-picker because we need a filterable/searchable dropdown component, but we don't need to show tags/chips because we want the input field of the Autocomplete to just act like an input for filtering.

Your Environment 🌎

`npx @material-ui/envinfo`
Browser used: Chrome

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Edge: 92.0.902.78
    Firefox: 91.0
    Safari: 14.1.2
@mnajdova
Copy link
Member

@mnajdova mnajdova commented Aug 24, 2021

Thanks for the report. I can reproduce. We should add a check for it. This diff should do it:

index 62bc7df557..e81a9baaa4 100644
--- a/packages/material-ui-unstyled/src/AutocompleteUnstyled/useAutocomplete.js
+++ b/packages/material-ui-unstyled/src/AutocompleteUnstyled/useAutocomplete.js
@@ -252,7 +252,7 @@ export default function useAutocomplete(props) {
     if (tagToFocus === -1) {
       inputRef.current.focus();
     } else {
-      anchorEl.querySelector(`[data-tag-index="${tagToFocus}"]`).focus();
+      anchorEl.querySelector(`[data-tag-index="${tagToFocus}"]`)?.focus();
     }
   });

@Phebonacci would you like to create a PR? :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

2 participants