PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
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>; 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>({ export function GenericDropdownMenu<T>({
value, value,
onChange, onChange,
@ -119,23 +123,24 @@ export function GenericDropdownMenu<T>({
}: IProps<T>): JSX.Element { }: IProps<T>): JSX.Element {
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu<HTMLElement>(); const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu<HTMLElement>();
const valueKey = calculateKey(value, toKey);
const selected: GenericDropdownMenuItem<T> | undefined = options const selected: GenericDropdownMenuItem<T> | undefined = options
.flatMap((it) => (isGenericDropdownMenuGroup(it) ? [it, ...it.options] : [it])) .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; let contextMenuOptions: JSX.Element;
if (options && isGenericDropdownMenuGroupArray(options)) { if (options && isGenericDropdownMenuGroupArray(options)) {
contextMenuOptions = ( contextMenuOptions = (
<> <>
{options.map((group) => ( {options.map((group) => (
<GenericDropdownMenuGroup <GenericDropdownMenuGroup
key={toKey?.(group.key) ?? (group.key as Key)} key={calculateKey(group.key, toKey)}
label={group.label} label={group.label}
description={group.description} description={group.description}
adornment={group.adornment} adornment={group.adornment}
> >
{group.options.map((option) => ( {group.options.map((option) => (
<GenericDropdownMenuOption <GenericDropdownMenuOption
key={toKey?.(option.key) ?? (option.key as Key)} key={calculateKey(option.key, toKey)}
label={option.label} label={option.label}
description={option.description} description={option.description}
onClick={(ev: ButtonEvent) => { onClick={(ev: ButtonEvent) => {
@ -144,7 +149,7 @@ export function GenericDropdownMenu<T>({
onClose?.(ev); onClose?.(ev);
}} }}
adornment={option.adornment} adornment={option.adornment}
isSelected={option === selected} isSelected={calculateKey(option.key, toKey) === valueKey}
/> />
))} ))}
</GenericDropdownMenuGroup> </GenericDropdownMenuGroup>
@ -156,7 +161,7 @@ export function GenericDropdownMenu<T>({
<> <>
{options.map((option) => ( {options.map((option) => (
<GenericDropdownMenuOption <GenericDropdownMenuOption
key={toKey?.(option.key) ?? (option.key as Key)} key={calculateKey(option.key, toKey)}
label={option.label} label={option.label}
description={option.description} description={option.description}
onClick={(ev: ButtonEvent) => { onClick={(ev: ButtonEvent) => {
@ -165,7 +170,7 @@ export function GenericDropdownMenu<T>({
onClose?.(ev); onClose?.(ev);
}} }}
adornment={option.adornment} adornment={option.adornment}
isSelected={option === selected} isSelected={calculateKey(option.key, toKey) === valueKey}
/> />
))} ))}
</> </>