IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Menu: Do not auto focus first item (#63078)

Browse Source
This commit is contained in:
Torkel Ödegaard 2023-02-10 12:06:41 +01:00 committed by GitHub
parent 27d70819cc
commit 7f6a1c06a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/grafana-ui/src/components/Menu/Menu.tsx
View File

@ -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}

14
packages/grafana-ui/src/components/Menu/hooks.test.tsx
View File

@ -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();

16
packages/grafana-ui/src/components/Menu/hooks.ts
View File

@ -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];
};