mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Menu: Do not auto focus first item (#63078)
This commit is contained in:
parent
27d70819cc
commit
7f6a1c06a6
@ -27,7 +27,7 @@ const MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(
|
||||
const localRef = useRef<HTMLDivElement>(null);
|
||||
useImperativeHandle(forwardedRef, () => localRef.current!);
|
||||
|
||||
const [handleKeys, handleFocus] = useMenuFocus({ localRef, onOpen, onClose, onKeyDown });
|
||||
const [handleKeys] = useMenuFocus({ localRef, onOpen, onClose, onKeyDown });
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -38,7 +38,6 @@ const MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(
|
||||
role="menu"
|
||||
aria-label={ariaLabel}
|
||||
onKeyDown={handleKeys}
|
||||
onFocus={handleFocus}
|
||||
>
|
||||
{header && <div className={styles.header}>{header}</div>}
|
||||
{children}
|
||||
|
@ -157,20 +157,6 @@ describe('useMenuFocus', () => {
|
||||
expect(setOpenedWithArrow).toHaveBeenCalledWith(false);
|
||||
});
|
||||
|
||||
it('focuses on first item when container receives focus', () => {
|
||||
const ref = createRef<HTMLDivElement>();
|
||||
const { result } = renderHook(() => useMenuFocus({ localRef: ref }));
|
||||
const [_, handleFocus] = result.current;
|
||||
|
||||
render(getMenuElement(ref, undefined, handleFocus));
|
||||
|
||||
act(() => {
|
||||
screen.getByTestId(testid).focus();
|
||||
});
|
||||
|
||||
expect(screen.getByText('Item 1').tabIndex).toBe(0);
|
||||
});
|
||||
|
||||
it('clicks focused item when Enter key is pressed', () => {
|
||||
const ref = createRef<HTMLDivElement>();
|
||||
const onClick = jest.fn();
|
||||
|
@ -17,7 +17,7 @@ export interface UseMenuFocusProps {
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
export type UseMenuFocusReturn = [(event: React.KeyboardEvent) => void, () => void];
|
||||
export type UseMenuFocusReturn = [(event: React.KeyboardEvent) => void];
|
||||
|
||||
/** @internal */
|
||||
export const useMenuFocus = ({
|
||||
@ -50,12 +50,6 @@ export const useMenuFocus = ({
|
||||
}, [localRef, focusedItem]);
|
||||
|
||||
useEffectOnce(() => {
|
||||
const firstMenuItem = localRef?.current?.querySelector<HTMLElement | HTMLButtonElement | HTMLAnchorElement>(
|
||||
'[data-role="menuitem"]:not([data-disabled])'
|
||||
);
|
||||
if (firstMenuItem) {
|
||||
firstMenuItem.tabIndex = 0;
|
||||
}
|
||||
onOpen?.(setFocusedItem);
|
||||
});
|
||||
|
||||
@ -112,11 +106,5 @@ export const useMenuFocus = ({
|
||||
onKeyDown?.(event);
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
if (focusedItem === UNFOCUSED) {
|
||||
setFocusedItem(0);
|
||||
}
|
||||
};
|
||||
|
||||
return [handleKeys, handleFocus];
|
||||
return [handleKeys];
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user