fix(combo-box): correct focus and item highlight behavior (#21057)

* fix(combo-box): correct focus and item highlight behavior

* fix(combo-box): show not-allowed cursor on disabled items

* fix(combo-box): respect disabled items during filter highlight

Author: heloiselui

packages/web-components/src/components/combo-box/combo-box-item.ts

@@ -1,22 +1,102 @@
 /**
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
+import type { PropertyValues } from 'lit';
 import { prefix } from '../../globals/settings';
 import CDSDropdownItem from '../dropdown/dropdown-item';
 import styles from './combo-box.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
+type NextSiblingAttribute =
+  | 'hovered-next-sibling'
+  | 'highlighted-next-sibling'
+  | 'selected-next-sibling';
+
 /**
  * Combo box item.
  *
  * @element cds-combo-box-item
  */
 @customElement(`${prefix}-combo-box-item`)
 class CDSComboBoxItem extends CDSDropdownItem {
+  private _nextSiblingRefs: Record<NextSiblingAttribute, Element | null> = {
+    'hovered-next-sibling': null,
+    'highlighted-next-sibling': null,
+    'selected-next-sibling': null,
+  };
+
+  private _handleMouseEnter = () => {
+    if (this.hasAttribute('disabled')) {
+      return;
+    }
+    this._syncNextSibling('hovered-next-sibling', true);
+  };
+
+  private _handleMouseLeave = () => {
+    this._syncNextSibling('hovered-next-sibling', false);
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.classList.add(`${prefix}--list-box__menu-item`);
+    this.addEventListener('mouseenter', this._handleMouseEnter);
+    this.addEventListener('mouseleave', this._handleMouseLeave);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('mouseenter', this._handleMouseEnter);
+    this.removeEventListener('mouseleave', this._handleMouseLeave);
+    this._syncNextSibling('hovered-next-sibling', false);
+    this._syncNextSibling('highlighted-next-sibling', false);
+    this._syncNextSibling('selected-next-sibling', false);
+    super.disconnectedCallback();
+  }
+
+  private _getNextItem(): Element | null {
+    let next = this.nextElementSibling;
+    while (next) {
+      if (
+        next instanceof HTMLElement &&
+        next.tagName.toLowerCase() === `${prefix}-combo-box-item`
+      ) {
+        return next;
+      }
+      next = next.nextElementSibling;
+    }
+    return null;
+  }
+
+  private _syncNextSibling(
+    attribute: NextSiblingAttribute,
+    shouldSet: boolean
+  ) {
+    const currentSibling = this._nextSiblingRefs[attribute];
+    currentSibling?.removeAttribute(attribute);
+    if (shouldSet) {
+      const next = this._getNextItem();
+      if (next) {
+        next.setAttribute(attribute, '');
+        this._nextSiblingRefs[attribute] = next;
+        return;
+      }
+    }
+    this._nextSiblingRefs[attribute] = null;
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has('highlighted')) {
+      this._syncNextSibling('highlighted-next-sibling', this.highlighted);
+    }
+    if (changedProperties.has('selected')) {
+      this._syncNextSibling('selected-next-sibling', this.selected);
+    }
+  }
+
   static styles = styles;
 }
 

packages/web-components/src/components/combo-box/combo-box.scss

@@ -11,6 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/layout' as *;
 @use '@carbon/styles/scss/components/combo-box' as *;
@@ -41,6 +42,11 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-combo-box) .#{$prefix}--text-input--highlighted-outline {
+  outline: 1px solid $focus;
+  outline-offset: -1px;
+}
+
 :host(#{$prefix}-combo-box[disabled]),
 :host(#{$prefix}-combo-box[read-only]) {
   .#{$prefix}--list-box__selection {
@@ -68,29 +74,70 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu-item__option {
     block-size: auto;
   }
+}
+
+:host(#{$prefix}-combo-box-item:not([disabled]):hover) {
+  background-color: $layer-hover;
+}
 
-  &:hover {
-    background-color: $layer-hover;
+:host(#{$prefix}-combo-box-item:first-of-type)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
+:host(#{$prefix}-combo-box-item:first-of-type[highlighted]) {
+  @include focus-outline('reset');
+
+  &::before {
+    position: absolute;
+    border: 2px solid $focus;
+    block-size: 100%;
+    border-block-start: 1px solid $focus;
+    content: '';
+    inline-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    pointer-events: none;
   }
 }
 
+:host(#{$prefix}-combo-box-item[highlighted-next-sibling]),
+:host(#{$prefix}-combo-box-item[hovered-next-sibling])
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
 :host(#{$prefix}-combo-box-item[disabled]) {
+  cursor: not-allowed;
+
   .#{$prefix}--list-box__menu-item__option {
     color: $text-disabled;
     cursor: not-allowed;
+    pointer-events: none;
     text-decoration: none;
   }
 }
 
+:host(#{$prefix}-combo-box-item[disabled][highlighted-next-sibling]:hover),
+:host(#{$prefix}-combo-box-item[disabled][hovered-next-sibling]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle;
+}
+
+:host(#{$prefix}-combo-box-item[disabled]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle-01;
+}
+
 :host(#{$prefix}-combo-box-item[highlighted]) {
   @extend .#{$prefix}--list-box__menu-item--highlighted;
 }
 
 :host(#{$prefix}-combo-box-item[selected]) {
   @extend .#{$prefix}--list-box__menu-item--active;
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
 
   .#{$prefix}--list-box__menu-item__option {
+    border-block-start-color: transparent;
     color: $text-primary;
   }
 
@@ -99,6 +146,16 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-combo-box-item[selected-next-sibling])
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
+:host(#{$prefix}-combo-box-item[disabled][selected-next-sibling]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle;
+}
+
 :host(#{$prefix}-combo-box-item[size='sm']) {
   block-size: $spacing-07;
 
@@ -115,6 +172,18 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-combo-box[size='sm']) {
+  .#{$prefix}--list-box__menu-icon {
+    inset-block: $spacing-02;
+  }
+}
+
+:host(#{$prefix}-combo-box[size='lg']) {
+  .#{$prefix}--list-box__menu-icon {
+    inset-block: $spacing-04;
+  }
+}
+
 :host(#{$prefix}-combo-box[ai-label]) {
   @extend .#{$prefix}--list-box__wrapper--slug;
 

packages/web-components/src/components/combo-box/combo-box.ts

@@ -226,7 +226,7 @@ class CDSComboBox extends CDSDropdown {
       } else {
         (comboItem as HTMLElement).style.display = '';
       }
-      comboItem.highlighted = index === firstMatchIndex;
+      comboItem.highlighted = index === firstMatchIndex && !comboItem.disabled;
     });
     return firstMatchIndex;
   }
@@ -389,6 +389,7 @@ class CDSComboBox extends CDSDropdown {
     const inputClasses = classMap({
       [`${prefix}--text-input`]: true,
       [`${prefix}--text-input--empty`]: !value,
+      [`${prefix}--text-input--highlighted-outline`]: this._hasHighlightedItem,
     });
 
     let activeDescendantFallback: string | undefined;
@@ -420,6 +421,17 @@ class CDSComboBox extends CDSDropdown {
     `;
   }
 
+  protected get _hasHighlightedItem() {
+    return (
+      this.open &&
+      Boolean(
+        this.querySelector(
+          (this.constructor as typeof CDSComboBox).selectorItemHighlighted
+        )
+      )
+    );
+  }
+
   // eslint-disable-next-line   @typescript-eslint/no-invalid-void-type -- https://github.com/carbon-design-system/carbon/issues/20452
   protected _renderFollowingLabel(): TemplateResult | void {
     const { clearSelectionLabel, _filterInputValue: filterInputValue } = this;