OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/28209/head
Michael Telatynski 2024-10-17 13:40:04 +01:00 committed by GitHub
parent 2cff2b5a86
commit 0c19991e3c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/structures/GenericDropdownMenu.tsx
View File

@ -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}
/>
))}
</>