diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx index e35584422..866a138b8 100644 --- a/apps/client/src/widgets/react/Dropdown.tsx +++ b/apps/client/src/widgets/react/Dropdown.tsx @@ -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, "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(null); const triggerRef = useRef(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} diff --git a/apps/client/src/widgets/type_widgets/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx index bd2c4c9e1..a1f9e63df 100644 --- a/apps/client/src/widgets/type_widgets/options/i18n.tsx +++ b/apps/client/src/widgets/type_widgets/options/i18n.tsx @@ -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 ( - + {locales.map(locale => (