Fix(multi select) change for navigating multi select item in multi select web component (#21013)

* fix(multi-select): change for multi-select-item navigation

* fix(multi-select): updates the logic for keyboard navigation

---------

Co-authored-by: Gururaj J <[email protected]>
Co-authored-by: Heloise Lui <[email protected]>

Author: 3 people

packages/web-components/src/components/multi-select/multi-select.ts

@@ -10,11 +10,7 @@ import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { prefix } from '../../globals/settings';
 import Close16 from '@carbon/icons/es/close/16.js';
-import {
-  filter,
-  forEach,
-  indexOf,
-} from '../../globals/internal/collection-helpers';
+import { filter, forEach } from '../../globals/internal/collection-helpers';
 import CDSDropdown, {
   DROPDOWN_KEYBOARD_ACTION,
   DROPDOWN_TYPE,
@@ -534,34 +530,11 @@ class CDSMultiSelect extends CDSDropdown {
    * @param direction `-1` to navigate backward, `1` to navigate forward.
    */
   protected _navigate(direction: number) {
-    if (!this.filterable) {
-      super._navigate(direction);
-      this._triggerNode.classList.add('no-focus-style');
-    } else {
-      // only navigate through remaining item
-      const constructor = this.constructor as typeof CDSMultiSelect;
-      const items = this.querySelectorAll(constructor.selectorItemResults);
-      const highlightedItem = this.querySelector(
-        constructor.selectorItemHighlighted
-      );
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
-      const highlightedIndex = indexOf(items, highlightedItem!);
-
-      let nextIndex = highlightedIndex + direction;
-
-      if (items[nextIndex]?.hasAttribute('disabled')) {
-        nextIndex += direction;
-      }
-      if (nextIndex < 0) {
-        nextIndex = items.length - 1;
-      }
-      if (nextIndex >= items.length) {
-        nextIndex = 0;
-      }
-      forEach(items, (item, i) => {
-        (item as CDSMultiSelectItem).highlighted = i === nextIndex;
-      });
+    super._navigate(direction);
+    if (this.filterable) {
       this.setAttribute('item-clicked', '');
+    } else {
+      this._triggerNode.classList.add('no-focus-style');
     }
   }