Fix network dropdown missing checkbox & aria-checked (#28220)

Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Oct 17, 2024 · 0c19991 · 0c19991
1 parent 2cff2b5
commit 0c19991
Showing 1 changed file with 11 additions and 6 deletions.
diff --git a/src/components/structures/GenericDropdownMenu.tsx b/src/components/structures/GenericDropdownMenu.tsx
@@ -106,6 +106,10 @@ type IProps<T> = WithKeyFunction<T> & {
     AdditionalOptions?: FunctionComponent<AdditionalOptionsProps>;
 };
 
+function calculateKey<T>(value: T, toKey: ((key: T) => Key) | undefined): Key {
+    return toKey ? toKey(value) : (value as Key);
+}
+
 export function GenericDropdownMenu<T>({
     value,
     onChange,
@@ -119,23 +123,24 @@ export function GenericDropdownMenu<T>({
 }: IProps<T>): JSX.Element {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu<HTMLElement>();
 
+    const valueKey = calculateKey(value, toKey);
     const selected: GenericDropdownMenuItem<T> | 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) => (
                     <GenericDropdownMenuGroup
-                        key={toKey?.(group.key) ?? (group.key as Key)}
+                        key={calculateKey(group.key, toKey)}
                         label={group.label}
                         description={group.description}
                         adornment={group.adornment}
                     >
                         {group.options.map((option) => (
                             <GenericDropdownMenuOption
-                                key={toKey?.(option.key) ?? (option.key as Key)}
+                                key={calculateKey(option.key, toKey)}
                                 label={option.label}
                                 description={option.description}
                                 onClick={(ev: ButtonEvent) => {
@@ -144,7 +149,7 @@ export function GenericDropdownMenu<T>({
                                     onClose?.(ev);
                                 }}
                                 adornment={option.adornment}
-                                isSelected={option === selected}
+                                isSelected={calculateKey(option.key, toKey) === valueKey}
                             />
                         ))}
                     </GenericDropdownMenuGroup>
@@ -156,7 +161,7 @@ export function GenericDropdownMenu<T>({
             <>
                 {options.map((option) => (
                     <GenericDropdownMenuOption
-                        key={toKey?.(option.key) ?? (option.key as Key)}
+                        key={calculateKey(option.key, toKey)}
                         label={option.label}
                         description={option.description}
                         onClick={(ev: ButtonEvent) => {
@@ -165,7 +170,7 @@ export function GenericDropdownMenu<T>({
                             onClose?.(ev);
                         }}
                         adornment={option.adornment}
-                        isSelected={option === selected}
+                        isSelected={calculateKey(option.key, toKey) === valueKey}
                     />
                 ))}
             </>