From 442045cbca599ca696a068b9cd4c93d2de936434 Mon Sep 17 00:00:00 2001
From: "Elias W. BA" <eliaswalyba@gmail.com>
Date: Fri, 27 Sep 2024 08:53:56 +0000
Subject: [PATCH] Fix item selection (click) in the context switcher (#2530)

* Fix click event on combobox items
---
 CHANGELOG.md             |  9 ++++++---
 assets/js/hooks/index.ts | 22 +++++++++++++++-------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c16bda437e..0329e84ae0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,8 @@ and this project adheres to
 
 ### Fixed
 
+- Fix item selection (project / billing account) in the context switcher
+  [#2518](https://github.com/OpenFn/lightning/issues/2518)
 - Export edge condition expressions as multiline in project spec
   [#2521](https://github.com/OpenFn/lightning/issues/2521)
 
@@ -37,8 +39,8 @@ and this project adheres to
 
 ### Fixed
 
-- Dataclip selector always shows that the dataclip is wiped even when the job wasn't run
-  [#2303](https://github.com/OpenFn/lightning/issues/2303)
+- Dataclip selector always shows that the dataclip is wiped even when the job
+  wasn't run [#2303](https://github.com/OpenFn/lightning/issues/2303)
 - Send run channel errors to sentry
   [#2515](https://github.com/OpenFn/lightning/issues/2515)
 
@@ -57,7 +59,8 @@ and this project adheres to
   [#2050](https://github.com/OpenFn/lightning/issues/2050)
 - Add quotes when special YAML characters are present in the exported project
   [#2446](https://github.com/OpenFn/lightning/issues/2446)
-- In the AI Assistant, don't open the help page when clicking the Responsible AI Link [#2511](https://github.com/OpenFn/lightning/issues/2511)
+- In the AI Assistant, don't open the help page when clicking the Responsible AI
+  Link [#2511](https://github.com/OpenFn/lightning/issues/2511)
 
 ## [v2.9.4] - 2024-09-16
 
diff --git a/assets/js/hooks/index.ts b/assets/js/hooks/index.ts
index 0005f9f146..acc39029ec 100644
--- a/assets/js/hooks/index.ts
+++ b/assets/js/hooks/index.ts
@@ -37,7 +37,9 @@ export const Combobox = {
     this.toggleButton.addEventListener('click', () => this.toggleDropdown());
 
     this.options.forEach((option, index) => {
-      option.addEventListener('click', () => this.selectOption(index));
+      option.addEventListener('click', () =>
+        this.selectOption(this.options.indexOf(option))
+      );
       option.addEventListener('mouseenter', () => this.handleMouseEnter(index));
       option.addEventListener('mousemove', () => this.handleMouseMove(index));
     });
@@ -87,7 +89,11 @@ export const Combobox = {
       case 'Enter':
         event.preventDefault();
         if (this.highlightedIndex !== -1) {
-          this.selectOption(this.highlightedIndex);
+          const visibleOptions = this.getVisibleOptions();
+          const selectedOptionIndex = this.options.indexOf(
+            visibleOptions[this.highlightedIndex]
+          );
+          this.selectOption(selectedOptionIndex);
         }
         break;
       case 'Escape':
@@ -197,11 +203,13 @@ export const Combobox = {
   },
 
   selectOption(index) {
-    const visibleOptions = this.getVisibleOptions();
-    const selectedOption = visibleOptions[index];
-    this.input.value = selectedOption.textContent.trim();
-    this.hideDropdown();
-    this.navigateToItem(selectedOption.dataset.url);
+    const selectedOption = this.options[index];
+
+    if (selectedOption && selectedOption.style.display !== 'none') {
+      this.input.value = selectedOption.textContent.trim();
+      this.hideDropdown();
+      this.navigateToItem(selectedOption.dataset.url);
+    }
   },
 
   navigateToItem(url) {