Merge pull request #1361 from zoglo/rework/selection-highlight

Improve UX on the select dropdown

src/scripts/choices.ts

@@ -521,6 +521,15 @@ class Choices {
       }
 
       this.passedElement.triggerEvent(EventType.showDropdown);
+
+      const activeElement = this.choiceList.element.querySelector<HTMLElement>(
+        getClassNamesSelector(this.config.classNames.selectedState),
+      );
+
+      if (activeElement !== null && !isScrolledIntoView(activeElement, this.choiceList.element)) {
+        // We use the native scrollIntoView function instead of choiceList.scrollToChildElement to avoid animated scroll.
+        activeElement.scrollIntoView();
+      }
     });
 
     return this;
@@ -531,6 +540,8 @@ class Choices {
       return this;
     }
 
+    this._removeHighlightedChoices();
+
     requestAnimationFrame(() => {
       this.dropdown.hide();
       this.containerOuter.close();
@@ -2040,14 +2051,10 @@ class Choices {
     this.containerOuter.addInvalidState();
   }
 
-  _highlightChoice(el: HTMLElement | null = null): void {
-    const choices = Array.from(this.dropdown.element.querySelectorAll<HTMLElement>(selectableChoiceIdentifier));
-
-    if (!choices.length) {
-      return;
-    }
-
-    let passedEl = el;
+  /**
+   * Removes any highlighted choice options
+   */
+  _removeHighlightedChoices(): void {
     const { highlightedState } = this.config.classNames;
     const highlightedChoices = Array.from(
       this.dropdown.element.querySelectorAll<HTMLElement>(getClassNamesSelector(highlightedState)),
@@ -2058,6 +2065,19 @@ class Choices {
       removeClassesFromElement(choice, highlightedState);
       choice.setAttribute('aria-selected', 'false');
     });
+  }
+
+  _highlightChoice(el: HTMLElement | null = null): void {
+    const choices = Array.from(this.dropdown.element.querySelectorAll<HTMLElement>(selectableChoiceIdentifier));
+
+    if (!choices.length) {
+      return;
+    }
+
+    let passedEl = el;
+    const { highlightedState } = this.config.classNames;
+
+    this._removeHighlightedChoices();
 
     if (passedEl) {
       this._highlightPosition = choices.indexOf(passedEl);

src/styles/choices.scss

@@ -318,14 +318,13 @@ $choices-placeholder-opacity: 0.5 !default;
     }
   }
   .#{$choices-selector}__item--selectable {
-    &[data-select-text] {
+    &.is-highlighted[data-select-text] {
       @media (min-width: 640px) {
         padding-right: 100px;
 
         &::after {
           content: attr(data-select-text);
           font-size: var(--choices-font-size-sm, #{$choices-font-size-sm});
-          opacity: 0;
           position: absolute;
           right: 10px;
           top: 50%;
@@ -345,12 +344,16 @@ $choices-placeholder-opacity: 0.5 !default;
       }
     }
 
+    // Reset the content on selected option
+    &.is-selected {
+      &::after {
+        content: none !important;
+      }
+    }
+
+    &.is-selected,
     &.is-highlighted {
       background-color: var(--choices-highlighted-color, #{$choices-highlighted-color});
-
-      &::after {
-        opacity: 0.5;
-      }
     }
   }
 }