starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-23 17:18:32 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix dropdown and dialog key handling

Browse Source
This commit is contained in:
Gregory Schier
2023-04-01 21:04:39 -07:00
parent 4aa771ba29
commit ff3734d65a
3 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-web/components/Sidebar.tsx
View File

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

6
src-web/components/core/Dialog.tsx
View File

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

9
src-web/components/core/Dropdown.tsx
View File

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