-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Select] moving focus with keyboard ArrowUp or ArrowDown is not working when [disablePortal] is set #34218
Comments
I've developed a workaround that anyone can use until this is fixed. import { useFocusIn } from './useDOMEvent';
// ...
const { ref } = useFocusIn((e: any) => {
if (e.target.matches('.MuiPaper-root')) {
const list = e.target.querySelector('.MuiList-root');
list?.firstElementChild?.focus();
}
});
<Select
{...props}
ref={ref}
>
{options}
</Select> and the custom hook import { useEffect, useState } from 'react';
export const useDOMEvent = (
type: keyof GlobalEventHandlersEventMap,
listener: EventListenerOrEventListenerObject,
options?: AddEventListenerOptions
) => {
const [target, setTarget] = useState<any>();
const { capture, once, passive, signal } = { ...options };
useEffect(() => {
if (target) {
target.addEventListener(type, listener, { capture, once, passive, signal });
return () => target.removeEventListener(type, listener, { capture });
// be aware that EventListenerOptions used for 'remove' do not mirror AddEventListenerOptions
}
}, [target, type, listener, capture, once, passive, signal]);
return { ref: setTarget };
};
export const useFocusIn = (listener: EventListenerOrEventListenerObject, options?: AddEventListenerOptions) =>
useDOMEvent('focusin', listener, options);
export const useFocusOut = (listener: EventListenerOrEventListenerObject, options?: AddEventListenerOptions) =>
useDOMEvent('focusout', listener, options); |
Thanks for reporting this issue and the workaround. Would you like to investigate the root cause of this in our Select component? |
I would like to give it a try. I can't say when I will find the time though. Maybe next friday. |
I forked and cloned the repo today. Currently trying to write a failing testcase for the bug. it('should focus list if no selection', () => {
const { getByRole } = render(<Select value="" autoFocus />);
fireEvent.mouseDown(getByRole('button'));
// TODO not matching WAI-ARIA authoring practices. It should focus the first (or selected) item.
expect(getByRole('listbox')).toHaveFocus();
}); Update: I have to declare defeat for today. Didn't succeed in creating a failing testcase. I went down the rabbit hole from the Update: no progress, had to work on other things. I want to try this idea to figure out what happens to focus. |
When anyone tackles this issue keep in mind that the first item in the list may not be selectable (i.e. disabled or ListSubhead). Focus should be put on the first selectable item in the list. |
Some more behaviour details. Here is a working example for testing. When portal is enabled (default), keyboard interaction seems to work as expected. Either when opening the dropdown using the keyboard (focus on the select pushing the But when the portal is disabled, then opening the dropdown with a mouse completely looses keyboard interaction. Mind that keyboard interaction still works if you open the dropdown using the keyboard. SO if you open the dropdown using the keyboard, you can freely use the keyboard. |
I assume this still isn't fixed? I've got the same problem at the moment. I'll try do the workaround meanwhile and see if that works for me |
Duplicates
Latest version
Current behavior 馃槸
When I click into a
<Select>
(withdisablePortal
) the dropdown opens, but ArrowUp and ArrowDown will not move the keyboard focus to any of the items.Addendum: I verified that the
autoFocus
property does not influence the behavior. It does not matter whetherautoFocus
is set or not.Expected behavior 馃
Without
disablePortal
the behavior is as expected: keyboard ArrowUp and ArrowDown keys will move the focus to the items and between the items.Steps to reproduce 馃暪
I prepared a codesandbox that exhibits the behavior
https://codesandbox.io/s/pensive-cache-xk9js4?file=/src/App.tsx
The relevant usage to elicit the bug is:
Observation:
When
disablePortal
is set the dropdown paper will receive focus when the dropdown opens. This is not the case otherwise.Context 馃敠
No response
Your environment 馃寧
No response
The text was updated successfully, but these errors were encountered: