fix: Handle ColorPicker
parentSelector being undefined (#5152)
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
parent
65c32b3319
commit
3d56ceb794
@ -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) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user