diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts index d1717631..ca805d0a 100644 --- a/src/scripts/choices.ts +++ b/src/scripts/choices.ts @@ -521,6 +521,15 @@ class Choices { } this.passedElement.triggerEvent(EventType.showDropdown); + + const activeElement = this.choiceList.element.querySelector( + 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(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(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(selectableChoiceIdentifier)); + + if (!choices.length) { + return; + } + + let passedEl = el; + const { highlightedState } = this.config.classNames; + + this._removeHighlightedChoices(); if (passedEl) { this._highlightPosition = choices.indexOf(passedEl); diff --git a/src/styles/choices.scss b/src/styles/choices.scss index bb7ab52c..9b02e5e4 100644 --- a/src/styles/choices.scss +++ b/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; - } } } } diff --git a/test-e2e/__screenshots__/chromium-win32.png b/test-e2e/__screenshots__/chromium-win32.png index 238d055b..9949c1b0 100644 Binary files a/test-e2e/__screenshots__/chromium-win32.png and b/test-e2e/__screenshots__/chromium-win32.png differ