From c2bef8df14111dc00c382a3ab36c27a08a92f0b7 Mon Sep 17 00:00:00 2001
From: Amanda Smith <90629384+amandaesmith3@users.noreply.github.com>
Date: Wed, 1 Dec 2021 10:16:58 -0600
Subject: [PATCH] fix(picker-column-internal): prevent multiple items from
 being highlighted at once (#24268)

---
 .../picker-column-internal.tsx                    | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/core/src/components/picker-column-internal/picker-column-internal.tsx b/core/src/components/picker-column-internal/picker-column-internal.tsx
index efc4096d0c..63a7f1dbe5 100644
--- a/core/src/components/picker-column-internal/picker-column-internal.tsx
+++ b/core/src/components/picker-column-internal/picker-column-internal.tsx
@@ -91,7 +91,15 @@ export class PickerColumnInternal implements ComponentInterface {
       const ev = entries[0];
 
       if (ev.isIntersecting) {
+        /**
+         * Because this initial call to scrollActiveItemIntoView has to fire before
+         * the scroll listener is set up, we need to manage the active class manually.
+         */
+        const oldActive = getElementRoot(this.el).querySelector(`.${PICKER_COL_ACTIVE}`);
+        oldActive?.classList.remove(PICKER_COL_ACTIVE);
         this.scrollActiveItemIntoView();
+        this.activeItem?.classList.add(PICKER_COL_ACTIVE);
+
         this.initializeScrollListener();
         this.isColumnVisible = true;
       } else {
@@ -115,13 +123,6 @@ export class PickerColumnInternal implements ComponentInterface {
 
     if (activeEl) {
       this.centerPickerItemInView(activeEl, false);
-
-      /**
-       * This is needed because the initial
-       * scrollActiveItemIntoView call fires before
-       * the scroll event listener is setup.
-       */
-      activeEl.classList.add(PICKER_COL_ACTIVE);
     }
   }