Fix dropdown and dialog key handling

This commit is contained in:
Gregory Schier
2023-04-01 21:04:39 -07:00
parent 35e25842be
commit 5b563b8a16
3 changed files with 14 additions and 3 deletions

View File

@@ -167,9 +167,11 @@ const _SidebarItem = forwardRef(function SidebarItem(
async (e: KeyboardEvent<HTMLInputElement>) => {
switch (e.key) {
case 'Enter':
e.preventDefault();
await handleSubmitNameEdit(e.currentTarget);
break;
case 'Escape':
e.preventDefault();
setEditing(false);
break;
}

View File

@@ -2,6 +2,7 @@ import classnames from 'classnames';
import { motion } from 'framer-motion';
import type { ReactNode } from 'react';
import { useMemo } from 'react';
import { useKeyPressEvent } from 'react-use';
import { Overlay } from '../Overlay';
import { Heading } from './Heading';
import { IconButton } from './IconButton';
@@ -33,6 +34,11 @@ export function Dialog({
[description],
);
useKeyPressEvent('Escape', (e) => {
e.preventDefault();
onClose();
});
return (
<Overlay open={open} onClose={onClose} portalName="dialog">
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">

View File

@@ -94,11 +94,13 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
setMenuStyles({ maxHeight: windowBox.height - menuBox.top - 5 });
}, []);
useKeyPressEvent('Escape', () => {
useKeyPressEvent('Escape', (e) => {
e.preventDefault();
onClose();
});
useKeyPressEvent('ArrowUp', () => {
useKeyPressEvent('ArrowUp', (e) => {
e.preventDefault();
setSelectedIndex((currIndex) => {
let nextIndex = (currIndex ?? 0) - 1;
const maxTries = items.length;
@@ -115,7 +117,8 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
});
});
useKeyPressEvent('ArrowDown', () => {
useKeyPressEvent('ArrowDown', (e) => {
e.preventDefault();
setSelectedIndex((currIndex) => {
let nextIndex = (currIndex ?? -1) + 1;
const maxTries = items.length;