Refactor WithDropdown to be more versatile and cause less bugs

ts/components/ButtonDropdown.svelte

@@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import ButtonToolbar from "./ButtonToolbar.svelte";
 
-    export let id: string;
+    export let id: string | undefined = undefined;
     let className = "";
     export { className as class };
 

ts/components/DropdownMenu.svelte

@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setContext } from "svelte";
     import { dropdownKey } from "./contextKeys";
 
-    export let id: string;
+    export let id: string | undefined = undefined;
 
     setContext(dropdownKey, null);
 </script>

ts/components/WithDropdown.svelte

@@ -0,0 +1,38 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import Dropdown from "bootstrap/js/dist/dropdown";
+
+    import { setContext, onDestroy } from "svelte";
+    import { dropdownKey } from "./contextKeys";
+
+    setContext(dropdownKey, {
+        dropdown: true,
+        "data-bs-toggle": "dropdown",
+    });
+
+    let dropdown: Dropdown;
+
+    const noop = () => {};
+    function createDropdown(toggle: HTMLElement): Dropdown {
+        /* avoid focusing element toggle on menu activation */
+        toggle.focus = noop;
+        dropdown = new Dropdown(toggle, {} as any);
+
+        return dropdown;
+    }
+
+    onDestroy(() => dropdown?.dispose());
+</script>
+
+<div class="dropdown">
+    <slot {createDropdown} />
+</div>
+
+<style lang="scss">
+    div {
+        display: contents;
+    }
+</style>

ts/components/WithDropdownMenu.svelte

@@ -1,49 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="typescript">
-    import Dropdown from "bootstrap/js/dist/dropdown";
-
-    import { setContext } from "svelte";
-    import { dropdownKey } from "./contextKeys";
-
-    export let disabled = false;
-
-    setContext(dropdownKey, {
-        dropdown: true,
-        "data-bs-toggle": "dropdown",
-        "aria-expanded": "false",
-    });
-
-    const menuId = Math.random().toString(36).substring(2);
-    let dropdown: Dropdown;
-
-    function activateDropdown(): void {
-        if (!disabled) {
-            dropdown.toggle();
-        }
-    }
-
-    /* Normally dropdown and trigger are associated with a
-    /* common ancestor with .dropdown class */
-    function createDropdown(element: HTMLElement): void {
-        /* Prevent focus on menu activation */
-        const noop = () => {};
-        Object.defineProperty(element, "focus", { value: noop });
-
-        const menu = (element.getRootNode() as Document) /* or shadow root */
-            .getElementById(menuId);
-
-        if (!menu) {
-            console.log(`Could not find menu "${menuId}" for dropdown menu.`);
-        } else {
-            dropdown = new Dropdown(element);
-
-            /* Set custom menu without using common element with .dropdown */
-            (dropdown as any)._menu = menu;
-        }
-    }
-</script>
-
-<slot {createDropdown} {activateDropdown} {menuId} />

ts/deckoptions/RevertButton.svelte

@@ -4,7 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import WithDropdownMenu from "components/WithDropdownMenu.svelte";
+    import type Dropdown from "bootstrap/js/dist/dropdown";
+    import WithDropdown from "components/WithDropdown.svelte";
     import DropdownMenu from "components/DropdownMenu.svelte";
     import DropdownItem from "components/DropdownItem.svelte";
     import Badge from "./Badge.svelte";
@@ -32,43 +33,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let modified: boolean;
     $: modified = !isEqual(value, defaultValue);
-    $: className = !modified ? "opacity-0" : "";
+
+    let dropdown: Dropdown;
 
     const isTouchDevice = getContext<boolean>(touchDeviceKey);
 
     function revert(): void {
         value = cloneDeep(defaultValue);
+        dropdown.hide();
     }
 </script>
 
-<WithDropdownMenu
+<WithDropdown let:createDropdown>
-    disabled={!modified}
+    <div class:hide={!modified}>
-    let:createDropdown
+        <Badge
-    let:activateDropdown
+            class="p-1"
-    let:menuId
+            on:mount={(event) => (dropdown = createDropdown(event.detail.span))}
->
-    <Badge
-        class={`p-1 ${className}`}
-        on:mount={(event) => createDropdown(event.detail.span)}
-        on:click={activateDropdown}
-    >
-        {@html revertIcon}
-    </Badge>
-
-    <DropdownMenu id={menuId}>
-        <DropdownItem
-            class={`spinner ${isTouchDevice ? "spin-always" : ""}`}
             on:click={() => {
-                revert();
+                if (modified) {
-                // Otherwise the menu won't close when the item is clicked
+                    dropdown.toggle();
-                // TODO: investigate why this is necessary
+                }
-                activateDropdown();
             }}
         >
-            {tr.deckConfigRevertButtonTooltip()}<Badge>{@html revertIcon}</Badge>
+            {@html revertIcon}
-        </DropdownItem>
+        </Badge>
-    </DropdownMenu>
+
-</WithDropdownMenu>
+        <DropdownMenu>
+            <DropdownItem
+                class={`spinner ${isTouchDevice ? "spin-always" : ""}`}
+                on:click={() => revert()}
+            >
+                {tr.deckConfigRevertButtonTooltip()}<Badge>{@html revertIcon}</Badge>
+            </DropdownItem>
+        </DropdownMenu>
+    </div>
+</WithDropdown>
 
 <style lang="scss">
     :global(.spinner:hover .badge, .spinner.spin-always .badge) {
@@ -84,4 +83,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             transform: rotate(0deg);
         }
     }
+
+    .hide :global(.badge) {
+        opacity: 0;
+    }
 </style>

ts/deckoptions/SaveButton.svelte

@@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import { createEventDispatcher } from "svelte";
     import type { DeckOptionsState } from "./lib";
+    import type Dropdown from "bootstrap/js/dist/dropdown";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@@ -14,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import DropdownMenu from "components/DropdownMenu.svelte";
     import DropdownItem from "components/DropdownItem.svelte";
     import DropdownDivider from "components/DropdownDivider.svelte";
-    import WithDropdownMenu from "components/WithDropdownMenu.svelte";
+    import WithDropdown from "components/WithDropdown.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
 
     const dispatch = createEventDispatcher();
@@ -53,6 +54,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         commitEditing();
         state.save(applyToChildDecks);
     }
+
+    let dropdown: Dropdown;
 </script>
 
 <ButtonGroup>
@@ -68,12 +71,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithDropdownMenu let:createDropdown let:activateDropdown let:menuId>
+        <WithDropdown let:createDropdown>
             <LabelButton
-                on:mount={(event) => createDropdown(event.detail.button)}
+                on:mount={(event) => (dropdown = createDropdown(event.detail.button))}
-                on:click={activateDropdown}
+                on:click={() => dropdown.toggle()}
             />
-            <DropdownMenu id={menuId}>
+            <DropdownMenu>
                 <DropdownItem on:click={() => dispatch("add")}
                     >{tr.deckConfigAddGroup()}</DropdownItem
                 >
@@ -91,6 +94,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     {tr.deckConfigSaveToAllSubdecks()}
                 </DropdownItem>
             </DropdownMenu>
-        </WithDropdownMenu>
+        </WithDropdown>
     </ButtonGroupItem>
 </ButtonGroup>

ts/editor/FormatBlockButtons.svelte

@@ -11,7 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import IconButton from "components/IconButton.svelte";
     import ButtonDropdown from "components/ButtonDropdown.svelte";
     import Item from "components/Item.svelte";
-    import WithDropdownMenu from "components/WithDropdownMenu.svelte";
+    import WithDropdown from "components/WithDropdown.svelte";
     import OnlyEditable from "./OnlyEditable.svelte";
     import CommandIconButton from "./CommandIconButton.svelte";
 
@@ -63,7 +63,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithDropdownMenu let:createDropdown let:menuId>
+        <WithDropdown let:createDropdown>
             <OnlyEditable let:disabled>
                 <IconButton
                     {disabled}
@@ -73,7 +73,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
             </OnlyEditable>
 
-            <ButtonDropdown id={menuId}>
+            <ButtonDropdown>
                 <Item id="justify">
                     <ButtonGroup>
                         <ButtonGroupItem>
@@ -142,6 +142,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     </ButtonGroup>
                 </Item>
             </ButtonDropdown>
-        </WithDropdownMenu>
+        </WithDropdown>
     </ButtonGroupItem>
 </ButtonGroup>

ts/editor/TemplateButtons.svelte

@@ -13,7 +13,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import IconButton from "components/IconButton.svelte";
     import DropdownMenu from "components/DropdownMenu.svelte";
     import DropdownItem from "components/DropdownItem.svelte";
-    import WithDropdownMenu from "components/WithDropdownMenu.svelte";
+    import WithDropdown from "components/WithDropdown.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
     import WithContext from "components/WithContext.svelte";
     import OnlyEditable from "./OnlyEditable.svelte";
@@ -88,7 +88,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithDropdownMenu let:createDropdown let:menuId>
+        <WithDropdown let:createDropdown>
             <WithContext key={disabledKey} let:context={disabled}>
                 <OnlyEditable let:disabled={inCodable}>
                     <IconButton
@@ -100,7 +100,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </OnlyEditable>
             </WithContext>
 
-            <DropdownMenu id={menuId}>
+            <DropdownMenu>
                 <WithShortcut
                     shortcut={"Control+M, M"}
                     let:createShortcut
@@ -185,7 +185,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     </DropdownItem>
                 </WithShortcut>
             </DropdownMenu>
-        </WithDropdownMenu>
+        </WithDropdown>
     </ButtonGroupItem>
 
     <ButtonGroupItem>