diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx index 6cf881f70..9c7deade5 100644 --- a/apps/client/src/widgets/react/FormList.tsx +++ b/apps/client/src/widgets/react/FormList.tsx @@ -1,6 +1,7 @@ +import { Dropdown as BootstrapDropdown } from "bootstrap"; import { ComponentChildren } from "preact"; import Icon from "./Icon"; -import type { CSSProperties } from "preact/compat"; +import { useEffect, useRef, type CSSProperties } from "preact/compat"; interface FormListOpts { children: ComponentChildren; @@ -9,17 +10,45 @@ interface FormListOpts { } export default function FormList({ children, onSelect, style }: FormListOpts) { + const wrapperRef = useRef(null); + const triggerRef = useRef(null); + + useEffect(() => { + if (!triggerRef.current || !wrapperRef.current) { + return; + } + + const $wrapperRef = $(wrapperRef.current); + const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current); + $wrapperRef.on("hide.bs.dropdown", (e) => e.preventDefault()); + + return () => { + $wrapperRef.off("hide.bs.dropdown"); + dropdown.dispose(); + } + }, [ triggerRef, wrapperRef ]); + return ( -