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

Dropdown: Make escape close a dropdown (#62098)

Browse Source 
* make escape close a dropdown

* make tab close the dropdown
This commit is contained in:
Ashley Harrison 2023-01-26 09:23:53 +00:00 committed by GitHub
parent cd27562c76
commit e6e560e3ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
View File

@ -36,6 +36,12 @@ export const Dropdown = React.memo(({ children, overlay, placement }: Props) =>
setShow(false); setShow(false);
}; };
const handleKeys = (event: React.KeyboardEvent) => {
if (event.key === 'Escape' || event.key === 'Tab') {
setShow(false);
}
};
return ( return (
<> <>
{React.cloneElement(typeof children === 'function' ? children(visible) : children, { {React.cloneElement(typeof children === 'function' ? children(visible) : children, {
@ -43,13 +49,13 @@ export const Dropdown = React.memo(({ children, overlay, placement }: Props) =>
})} })}
{visible && ( {visible && (
<Portal> <Portal>
<FocusScope autoFocus> <FocusScope autoFocus restoreFocus contain>
{/* {/*
this is handling bubbled events from the inner overlay this is handling bubbled events from the inner overlay
see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events
*/} */}
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */} {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
<div ref={setTooltipRef} {...getTooltipProps()} onClick={onOverlayClicked}> <div ref={setTooltipRef} {...getTooltipProps()} onClick={onOverlayClicked} onKeyDown={handleKeys}>
<div {...getArrowProps({ className: 'tooltip-arrow' })} /> <div {...getArrowProps({ className: 'tooltip-arrow' })} />
<CSSTransition <CSSTransition
nodeRef={transitionRef} nodeRef={transitionRef}

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

@ -98,11 +98,10 @@ export const useMenuFocus = ({
menuItems?.[focusedItem]?.click(); menuItems?.[focusedItem]?.click();
break; break;
case 'Escape': case 'Escape':
event.preventDefault();
event.stopPropagation();
onClose?.(); onClose?.();
break; break;
case 'Tab': case 'Tab':
event.preventDefault();
onClose?.(); onClose?.();
break; break;
default: default: