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

fix: non-letter shortcuts being swallowed by color picker (#5316)

Browse Source
This commit is contained in:
David Luzar 2022-06-17 12:37:11 +02:00 committed by GitHub
parent 5feacd9a3b
commit fd48c2cf79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/App.tsx
View File

@ -1694,7 +1694,9 @@ class App extends React.Component<AppProps, AppState> {
}
if (
(isWritableElement(event.target) && event.key !== KEYS.ESCAPE) ||
(isWritableElement(event.target) &&
!event[KEYS.CTRL_OR_CMD] &&
event.key !== KEYS.ESCAPE) ||
// case: using arrows to move between buttons
(isArrowKey(event.key) && isInputLike(event.target))
) {

18
src/components/ColorPicker.tsx
View File

@ -128,7 +128,9 @@ 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) {
@ -140,19 +142,19 @@ const Picker = ({
event.preventDefault();
}
} else if (isArrowKey(event.key)) {
handled = true;
const { activeElement } = document;
const isRTL = getLanguage().rtl;
let isCustom = false;
let index = Array.prototype.indexOf.call(
gallery.current!.querySelector(".color-picker-content--default")!
.children,
gallery.current!.querySelector(".color-picker-content--default")
?.children,
activeElement,
);
if (index === -1) {
index = Array.prototype.indexOf.call(
gallery.current!.querySelector(
".color-picker-content--canvas-colors",
)!.children,
gallery.current!.querySelector(".color-picker-content--canvas-colors")
?.children,
activeElement,
);
if (index !== -1) {
@ -180,8 +182,11 @@ const Picker = ({
event.preventDefault();
} else if (
keyBindings.includes(event.key.toLowerCase()) &&
!event[KEYS.CTRL_OR_CMD] &&
!event.altKey &&
!isWritableElement(event.target)
) {
handled = true;
const index = keyBindings.indexOf(event.key.toLowerCase());
const isCustom = index >= MAX_DEFAULT_COLORS;
const parentElement = isCustom
@ -196,11 +201,14 @@ const Picker = ({
event.preventDefault();
} else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
handled = true;
event.preventDefault();
onClose();
}
if (handled) {
event.nativeEvent.stopImmediatePropagation();
event.stopPropagation();
}
};
const renderColors = (colors: Array<string>, custom: boolean = false) => {