chore(options/i18n): fix click on label not working on select

This commit is contained in:
Elian Doran 2025-10-14 18:15:45 +03:00
parent 0c2b186e50
commit 5693b59318
No known key found for this signature in database
2 changed files with 5 additions and 6 deletions

View File

@ -1,11 +1,10 @@
import { Dropdown as BootstrapDropdown } from "bootstrap";
import { ComponentChildren } from "preact";
import { CSSProperties } from "preact/compat";
import { CSSProperties, HTMLProps } from "preact/compat";
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
import { useUniqueName } from "./hooks";
export interface DropdownProps {
className?: string;
export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "className"> {
buttonClassName?: string;
isStatic?: boolean;
children: ComponentChildren;
@ -22,7 +21,7 @@ export interface DropdownProps {
forceShown?: boolean;
}
export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown }: DropdownProps) {
export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown }: DropdownProps) {
const dropdownRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null);
@ -74,7 +73,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
aria-haspopup="true"
aria-expanded="false"
title={title}
id={ariaId}
id={id ?? ariaId}
disabled={disabled}
>
{text}

View File

@ -62,7 +62,7 @@ function LocalizationOptions() {
function LocaleSelector({ id, locales, currentValue, onChange }: { id?: string; locales: Locale[], currentValue: string, onChange: (newLocale: string) => void }) {
const [ activeLocale, setActiveLocale ] = useState(locales.find(l => l.id === currentValue));
return (
<Dropdown text={activeLocale?.name}>
<Dropdown id={id} text={activeLocale?.name}>
{locales.map(locale => (
<FormListItem
checked={locale === activeLocale }