diff --git a/packages/grafana-ui/src/components/Menu/Menu.tsx b/packages/grafana-ui/src/components/Menu/Menu.tsx index b2b159b4d1d..c2307326a88 100644 --- a/packages/grafana-ui/src/components/Menu/Menu.tsx +++ b/packages/grafana-ui/src/components/Menu/Menu.tsx @@ -27,7 +27,7 @@ const MenuComp = React.forwardRef( const localRef = useRef(null); useImperativeHandle(forwardedRef, () => localRef.current!); - const [handleKeys, handleFocus] = useMenuFocus({ localRef, onOpen, onClose, onKeyDown }); + const [handleKeys] = useMenuFocus({ localRef, onOpen, onClose, onKeyDown }); return (
( role="menu" aria-label={ariaLabel} onKeyDown={handleKeys} - onFocus={handleFocus} > {header &&
{header}
} {children} diff --git a/packages/grafana-ui/src/components/Menu/hooks.test.tsx b/packages/grafana-ui/src/components/Menu/hooks.test.tsx index 2c8bfabf886..94b007a4ab7 100644 --- a/packages/grafana-ui/src/components/Menu/hooks.test.tsx +++ b/packages/grafana-ui/src/components/Menu/hooks.test.tsx @@ -157,20 +157,6 @@ describe('useMenuFocus', () => { expect(setOpenedWithArrow).toHaveBeenCalledWith(false); }); - it('focuses on first item when container receives focus', () => { - const ref = createRef(); - 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(); const onClick = jest.fn(); diff --git a/packages/grafana-ui/src/components/Menu/hooks.ts b/packages/grafana-ui/src/components/Menu/hooks.ts index f4983e80ff5..6713535827a 100644 --- a/packages/grafana-ui/src/components/Menu/hooks.ts +++ b/packages/grafana-ui/src/components/Menu/hooks.ts @@ -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( - '[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]; };