fix: Handle ColorPicker parentSelector being undefined (#5152)

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Tom Sherman 2022-05-07 19:16:14 +01:00 committed by GitHub
parent 65c32b3319
commit 3d56ceb794
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -144,13 +144,13 @@ const Picker = ({
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,
@ -159,14 +159,12 @@ const Picker = ({
isCustom = true; isCustom = true;
} }
} }
const parentSelector = isCustom const parentElement = isCustom
? gallery!.current!.querySelector( ? gallery.current?.querySelector(".color-picker-content--canvas-colors")
".color-picker-content--canvas-colors", : gallery.current?.querySelector(".color-picker-content--default");
)!
: gallery!.current!.querySelector(".color-picker-content--default")!;
if (index !== -1) { if (parentElement && index !== -1) {
const length = parentSelector!.children.length - (showInput ? 1 : 0); const length = parentElement.children.length - (showInput ? 1 : 0);
const nextIndex = const nextIndex =
event.key === (isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT) event.key === (isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT)
? (index + 1) % length ? (index + 1) % length
@ -177,7 +175,7 @@ const Picker = ({
: !isCustom && event.key === KEYS.ARROW_UP : !isCustom && event.key === KEYS.ARROW_UP
? (length + index - 5) % length ? (length + index - 5) % length
: index; : index;
(parentSelector!.children![nextIndex] as HTMLElement)?.focus(); (parentElement.children[nextIndex] as HTMLElement | undefined)?.focus();
} }
event.preventDefault(); event.preventDefault();
} else if ( } else if (
@ -186,13 +184,15 @@ const Picker = ({
) { ) {
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 parentSelector = isCustom const parentElement = isCustom
? gallery!.current!.querySelector( ? gallery?.current?.querySelector(
".color-picker-content--canvas-colors", ".color-picker-content--canvas-colors",
)! )
: gallery!.current!.querySelector(".color-picker-content--default")!; : gallery?.current?.querySelector(".color-picker-content--default");
const actualIndex = isCustom ? index - MAX_DEFAULT_COLORS : index; const actualIndex = isCustom ? index - MAX_DEFAULT_COLORS : index;
(parentSelector!.children![actualIndex] as HTMLElement)?.focus(); (
parentElement?.children[actualIndex] as HTMLElement | undefined
)?.focus();
event.preventDefault(); event.preventDefault();
} else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) { } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {