From a89812f6b965c00eaee04186a2377194c61ade88 Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Wed, 24 Jan 2024 10:16:43 +0000
Subject: [PATCH] Move DropdownController themeOptions to an instance property

---
 client/src/controllers/DropdownController.ts | 63 ++++++++++----------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/client/src/controllers/DropdownController.ts b/client/src/controllers/DropdownController.ts
index 0c94b4a452b8..114fc69fce50 100644
--- a/client/src/controllers/DropdownController.ts
+++ b/client/src/controllers/DropdownController.ts
@@ -80,25 +80,7 @@ export const rotateToggleIcon = {
   },
 };
 
-const themeOptions = {
-  'dropdown': {
-    arrow: true,
-    maxWidth: 350,
-    placement: 'bottom',
-  },
-  'drilldown': {
-    arrow: false,
-    maxWidth: 'none',
-    placement: 'bottom-end',
-  },
-  'dropdown-button': {
-    arrow: false,
-    maxWidth: 'none',
-    placement: 'bottom-start',
-  },
-} as const;
-
-type TippyTheme = keyof typeof themeOptions;
+type TippyTheme = 'dropdown' | 'drilldown' | 'dropdown-button';
 
 /**
  * A Tippy.js tooltip with interactive "dropdown" options.
@@ -174,14 +156,12 @@ export class DropdownController extends Controller<HTMLElement> {
       ...(this.hasContentTarget
         ? { content: this.contentTarget as Content }
         : {}),
-      ...themeOptions[this.themeValue],
+      ...this.themeOptions,
       trigger: 'click',
       interactive: true,
       ...(this.hasOffsetValue && { offset: this.offsetValue }),
-      hideOnClick: !this.useCustomHideOnClickAway,
       getReferenceClientRect: () => this.reference.getBoundingClientRect(),
       theme: this.themeValue,
-      plugins: this.plugins,
       onShow() {
         if (hoverTooltipInstance) {
           hoverTooltipInstance.disable();
@@ -199,13 +179,35 @@ export class DropdownController extends Controller<HTMLElement> {
     };
   }
 
-  get useCustomHideOnClickAway() {
-    // Tippy's default hideOnClick option for "hiding on click away" doesn't
-    // work well with our datetime libraries. Instead, we use a custom plugin
-    // to hide the tooltip when clicking outside the dropdown. It's unlikely
-    // we'll render a datetime picker for themes other than drilldown, so use
-    // the custom solution for this theme only.
-    return this.themeValue === 'drilldown';
+  get themeOptions() {
+    return (
+      {
+        'dropdown': {
+          arrow: true,
+          maxWidth: 350,
+          placement: 'bottom',
+          plugins: this.plugins,
+        },
+        'drilldown': {
+          arrow: false,
+          maxWidth: 'none',
+          placement: 'bottom-end',
+          // Tippy's default hideOnClick option for "hiding on click away" doesn't
+          // work well with our datetime libraries. Instead, we use a custom plugin
+          // to hide the tooltip when clicking outside the dropdown. It's unlikely
+          // we'll render a datetime picker for themes other than drilldown, so use
+          // the custom solution for this theme only.
+          hideOnClick: false,
+          plugins: this.plugins.concat([this.hideTooltipOnClickAway]),
+        },
+        'dropdown-button': {
+          arrow: false,
+          maxWidth: 'none',
+          placement: 'bottom-start',
+          plugins: this.plugins,
+        },
+      } as const
+    )[this.themeValue];
   }
 
   /**
@@ -264,9 +266,6 @@ export class DropdownController extends Controller<HTMLElement> {
     if (this.hideOnClickValue) {
       plugins.push(hideTooltipOnClickInside);
     }
-    if (this.useCustomHideOnClickAway) {
-      plugins.push(this.hideTooltipOnClickAway);
-    }
     return plugins;
   }