Skip to content

Commit

Permalink
added react keyboard listener
Browse files Browse the repository at this point in the history
  • Loading branch information
MariaBonde committed Aug 28, 2024
1 parent 45dced6 commit 74d5b52
Showing 1 changed file with 2 additions and 3 deletions.
5 changes: 2 additions & 3 deletions src/hemsedal24/components/Popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,16 @@ const Popover: React.FC<PopoverProps> = ({ onClose, children }) => {
};
}, [onClose]);

const handleKeyDown = (event: KeyboardEvent) => {
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === 'Escape' || event.key === 'Enter') {
if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
onClose();
}}
};
document.addEventListener('keydown', handleKeyDown);

return (
<>
<div className={styles.backdrop} onClick={onClose} tabIndex={0} role='button' aria-label="Close popover"> </div>
<div className={styles.backdrop} onClick={onClose} onKeyDown={handleKeyDown} tabIndex={0} role='button' aria-label="Close popover"> </div>
<div ref={popoverRef} className={styles.popover_content}>
{children}
</div>
Expand Down

0 comments on commit 74d5b52

Please sign in to comment.