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 ( 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 // case: using arrows to move between buttons
(isArrowKey(event.key) && isInputLike(event.target)) (isArrowKey(event.key) && isInputLike(event.target))
) { ) {

18
src/components/ColorPicker.tsx
View File

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