[Autocomplete] ArrowLeft key press throws an error when setting renderTags to return null. #27933
Open
2 tasks done
Comments
|
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? :) |
|
Hi @Phebonacci, if this hasn't fixed yet, can i work on this issue, also can you guide me on how to get started since i am just starting out? |
|
This seems inactive, so I'm starting to work on this. |
|
Hey @mnajdova can you help me with the test? I've no experience with tests. sorry about that. it('should not throw when render tags is null', () => {
const Test = (props) => {
const { options, renderTags, defaultValue } = props;
const {
groupedOptions,
getRootProps,
getInputLabelProps,
getInputProps,
getListboxProps,
getOptionProps,
setAnchorEl,
} = useAutocomplete({
options,
open: true,
// useAutocomplete doesn't expect renderTags prop
renderTags,
multiple: true,
defaultValue,
});
return (
<div>
<div {...getRootProps()} ref={setAnchorEl}>
<label {...getInputLabelProps()}>useAutocomplete</label>
<input {...getInputProps()} type="text" />
</div>
{groupedOptions.length > 0 ? (
<ul {...getListboxProps()}>
{groupedOptions.map((option, index) => {
return <li {...getOptionProps({ option, index })}>{option}</li>;
})}
</ul>
) : null}
</div>
);
};
render(<Test options={['foo', 'bar']} renderTags={() => null} defaultValue={['foo']} />);
const combobox = screen.getByRole('combobox');
expect(combobox).toBeVisible();
fireEvent.keyDown(combobox, { key: 'ArrowLeft' });
});
|
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When the ArrowLeft key is pressed while there are selected options and
renderTagsis set to return null (so that no tags are rendered), the component breaks.Current Behavior😯
When the ArrowLeft key is pressed while there are selected options and
renderTagsis set to return null (so that no tags are rendered), the component breaks and returns the error describe below:It appears that the
useAutocompletehook tries to put focus on the tag elements without checking whether there are tags rendered or not as per the source code:Expected Behavior🤔
When the ArrowLeft key is pressed while there are selected options and
renderTagsis 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:
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`
The text was updated successfully, but these errors were encountered: