chore(react/launch_bar): hide dropdown when selecting date

apps/client/src/widgets/launch_bar/CalendarWidget.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, StateUpdater, useEffect, useMemo, useState } from "preact/hooks";
+import { Dispatch, StateUpdater, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import FNote from "../../entities/fnote";
 import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
 import { Dayjs, dayjs } from "@triliumnext/commons";
@@ -11,6 +11,7 @@ import FormDropdownList from "../react/FormDropdownList";
 import FormTextBox from "../react/FormTextBox";
 import toast from "../../services/toast";
 import date_notes from "../../services/date_notes";
+import { Dropdown } from "bootstrap";
 
 const MONTHS = [
     t("calendar.january"),
@@ -31,6 +32,7 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
     const { title, icon } = useLauncherIconAndTitle(launcherNote);
     const [ calendarArgs, setCalendarArgs ] = useState<Pick<CalendarArgs, "activeDate" | "todaysDate">>();
     const [ date, setDate ] = useState<Dayjs>();
+    const dropdownRef = useRef<Dropdown>(null);
 
     return (
         <LaunchBarDropdownButton
@@ -45,6 +47,7 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
                 });
                 setDate(dayjs(activeDate || todaysDate).startOf('month'));
             }}
+            dropdownRef={dropdownRef}
             dropdownOptions={{
                 autoClose: "outside"
             }}
@@ -57,7 +60,7 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
                         const note = await date_notes.getDayNote(date);
                         if (note) {
                             appContext.tabManager.getActiveContext()?.setNote(note.noteId);
-                            // this.dropdown?.hide();
+                            dropdownRef.current?.hide();
                         } else {
                             toast.showError(t("calendar.cannot_find_day_note"));
                         }

apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx

@@ -20,7 +20,7 @@ export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className"
     )
 }
 
-export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown" | "dropdownOptions"> & { icon: string }) {
+export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown" | "dropdownOptions" | "dropdownRef"> & { icon: string }) {
     return (
         <Dropdown
             className="right-dropdown-widget"

apps/client/src/widgets/react/Dropdown.tsx

@@ -1,7 +1,7 @@
 import { Dropdown as BootstrapDropdown } from "bootstrap";
 import { ComponentChildren, HTMLAttributes } from "preact";
 import { CSSProperties, HTMLProps } from "preact/compat";
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { useUniqueName } from "./hooks";
 
 type DataAttributes = {
@@ -27,10 +27,11 @@ export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "c
     onShown?: () => void;
     onHidden?: () => void;
     dropdownOptions?: Partial<BootstrapDropdown.Options>;
+    dropdownRef?: MutableRef<BootstrapDropdown | null>;
 }
 
-export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps }: DropdownProps) {
+export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps, dropdownRef }: DropdownProps) {
-    const dropdownRef = useRef<HTMLDivElement | null>(null);
+    const containerRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
     const [ shown, setShown ] = useState(false);
@@ -39,6 +40,9 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
         if (!triggerRef.current) return;
 
         const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current, dropdownOptions);
+        if (dropdownRef) {
+            dropdownRef.current = dropdown;
+        }
         if (forceShown) {
             dropdown.show();
             setShown(true);
@@ -57,9 +61,9 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
     }, []);
 
     useEffect(() => {
-        if (!dropdownRef.current) return;
+        if (!containerRef.current) return;
 
-        const $dropdown = $(dropdownRef.current);
+        const $dropdown = $(containerRef.current);
         $dropdown.on("show.bs.dropdown", onShown);
         $dropdown.on("hide.bs.dropdown", onHidden);
 
@@ -73,7 +77,7 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
     const ariaId = useUniqueName("button");
 
     return (
-        <div ref={dropdownRef} class={`dropdown ${className ?? ""}`} style={{ display: "flex" }}>
+        <div ref={containerRef} class={`dropdown ${className ?? ""}`} style={{ display: "flex" }}>
             <button
                 className={`${iconAction ? "icon-action" : "btn"} ${!noSelectButtonStyle ? "select-button" : ""} ${buttonClassName ?? ""} ${!hideToggleArrow ? "dropdown-toggle" : ""}`}
                 ref={triggerRef}