sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: focus traps inside popovers (#5317)

Browse Source
This commit is contained in:
David Luzar
2022-06-23 17:33:50 +02:00
committed by GitHub
parent 50bc7e099a
commit af31e9dcc2
4 changed files with 54 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ColorPicker.tsx
View File

@ -129,19 +129,7 @@ const Picker = ({
const handleKeyDown = (event: React.KeyboardEvent) => {
let handled = false;
if (event.key === KEYS.TAB) {
handled = true;
const { activeElement } = document;
if (event.shiftKey) {
if (activeElement === firstItem.current) {
colorInput.current?.focus();
event.preventDefault();
}
} else if (activeElement === colorInput.current) {
firstItem.current?.focus();
event.preventDefault();
}
} else if (isArrowKey(event.key)) {
if (isArrowKey(event.key)) {
handled = true;
const { activeElement } = document;
const isRTL = getLanguage().rtl;
@ -272,7 +260,8 @@ const Picker = ({
gallery.current = el;
}
}}
tabIndex={0}
// to allow focusing by clicking but not by tabbing
tabIndex={-1}
>
<div className="color-picker-content--default">
{renderColors(colors)}