Merge pull request #470 from upfluence/oc/DRA-1582

Added fix to avoid showing style on focus when hover behavior is…
upfluence · Jan 22, 2025 · 31ee447 · 31ee447
2 parents 258c326 + f41effd
commit 31ee447
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/addon/components/o-s-s/infinite-select.hbs b/addon/components/o-s-s/infinite-select.hbs
@@ -35,8 +35,19 @@
       {{#if (and @loading (not @loadingMore))}}
         <OSS::Skeleton @width="100%" @height="18" @multiple={{5}} @direction="col" />
       {{else}}
-        {{#each this.items as |item|}}
-          <li class="upf-infinite-select__item" role="button" {{on "click" (fn this.didSelectItem item)}} tabindex="0">
+        {{#each this.items as |item index|}}
+          <li
+            class="upf-infinite-select__item
+              {{if
+                (and (eq index this._focusElement) this.focusStylesDisabled)
+                ' upf-infinite-select__item--disabled-focus'
+              }}"
+            role="button"
+            {{on "mouseenter" (fn this.handleItemHover index)}}
+            {{on "mouseleave" this.clearHoverState}}
+            {{on "click" (fn this.didSelectItem item)}}
+            tabindex="0"
+          >
             {{#if (has-block "option")}}
               {{yield item to="option"}}
             {{else}}

diff --git a/addon/components/o-s-s/infinite-select.ts b/addon/components/o-s-s/infinite-select.ts
@@ -31,6 +31,7 @@ const DEFAULT_ITEM_LABEL = 'name';
 export default class OSSInfiniteSelect extends Component<InfiniteSelectArgs> {
   @tracked _searchKeyword: string = '';
   @tracked _focusElement: number = 0;
+  @tracked focusStylesDisabled: boolean = true;
 
   @tracked elementId: string = guidFor(this);
 
@@ -109,6 +110,15 @@ export default class OSSInfiniteSelect extends Component<InfiniteSelectArgs> {
 
   @action
   handleKeyEventInput(e: KeyboardEvent): void {
+    if (!this.searchEnabled && this.enableKeyboard) {
+      if (this.focusStylesDisabled === true) {
+        this.focusStylesDisabled = false;
+        return;
+      }
+
+      this.focusStylesDisabled = false;
+    }
+
     const actionsForKeys: Record<string, (self: any, e: KeyboardEvent) => void> = {
       ArrowDown: this.focusFirstItem,
       Enter: this.focusFirstItem,
@@ -122,6 +132,10 @@ export default class OSSInfiniteSelect extends Component<InfiniteSelectArgs> {
 
   @action
   handleKeyEvent(e: KeyboardEvent): void {
+    if (!this.searchEnabled && this.enableKeyboard) {
+      this.focusStylesDisabled = false;
+    }
+
     const actionsForKeys: Record<string, (self: any, e: KeyboardEvent) => void> = {
       ArrowDown: this.handleArrowDown,
       ArrowUp: this.handleArrowUp,
@@ -135,6 +149,18 @@ export default class OSSInfiniteSelect extends Component<InfiniteSelectArgs> {
     }
   }
 
+  @action
+  handleItemHover(index: number): void {
+    this._focusElementAt(index);
+    this._focusElement = index;
+    this.focusStylesDisabled = this._focusElement === index ? false : true;
+  }
+
+  @action
+  clearHoverState(): void {
+    this.focusStylesDisabled = false;
+  }
+
   private _focusElementAt(index: number): void {
     const el = document.querySelectorAll(
       `[data-internal-id="${this.elementId}"] .upf-infinite-select__items-container li`

diff --git a/app/styles/base/_infinite-select.less b/app/styles/base/_infinite-select.less
@@ -41,3 +41,10 @@
     outline: none;
   }
 }
+
+.upf-infinite-select__item--disabled-focus {
+  &:focus {
+    outline: none;
+    background-color: var(--color-white);
+  }
+}
diff --git a/app/styles/molecules/select.less b/app/styles/molecules/select.less
@@ -85,10 +85,6 @@
     .item-wrapper {
       padding: var(--spacing-px-6) var(--spacing-px-6);
       border-radius: var(--border-radius-sm);
-
-      &.selected {
-        background-color: var(--color-gray-100);
-      }
     }
   }
 }