From 0c19991e3c6036b9f8fcb46dd43a20aeacccfaa8 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Oct 2024 13:40:04 +0100 Subject: [PATCH] Fix network dropdown missing checkbox & aria-checked (#28220) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../structures/GenericDropdownMenu.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/structures/GenericDropdownMenu.tsx b/src/components/structures/GenericDropdownMenu.tsx index 3e3d415371..b323d9b8ad 100644 --- a/src/components/structures/GenericDropdownMenu.tsx +++ b/src/components/structures/GenericDropdownMenu.tsx @@ -106,6 +106,10 @@ type IProps = WithKeyFunction & { AdditionalOptions?: FunctionComponent; }; +function calculateKey(value: T, toKey: ((key: T) => Key) | undefined): Key { + return toKey ? toKey(value) : (value as Key); +} + export function GenericDropdownMenu({ value, onChange, @@ -119,23 +123,24 @@ export function GenericDropdownMenu({ }: IProps): JSX.Element { const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); + const valueKey = calculateKey(value, toKey); const selected: GenericDropdownMenuItem | undefined = options .flatMap((it) => (isGenericDropdownMenuGroup(it) ? [it, ...it.options] : [it])) - .find((option) => (toKey ? toKey(option.key) === toKey(value) : option.key === value)); + .find((option) => calculateKey(option.key, toKey) === valueKey); let contextMenuOptions: JSX.Element; if (options && isGenericDropdownMenuGroupArray(options)) { contextMenuOptions = ( <> {options.map((group) => ( {group.options.map((option) => ( { @@ -144,7 +149,7 @@ export function GenericDropdownMenu({ onClose?.(ev); }} adornment={option.adornment} - isSelected={option === selected} + isSelected={calculateKey(option.key, toKey) === valueKey} /> ))} @@ -156,7 +161,7 @@ export function GenericDropdownMenu({ <> {options.map((option) => ( { @@ -165,7 +170,7 @@ export function GenericDropdownMenu({ onClose?.(ev); }} adornment={option.adornment} - isSelected={option === selected} + isSelected={calculateKey(option.key, toKey) === valueKey} /> ))}