fix(AutoComplete): fix UX to open menu after autocomplete focus

rotki · Jun 25, 2024 · 87decc5 · 87decc5
1 parent 4d7bff9
commit 87decc5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts b/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
@@ -80,7 +80,12 @@ describe('autocomplete', () => {
       },
     });
 
+    await wrapper.find('input').trigger('focus');
+    await nextTick();
+    expect(document.body.querySelector('div[role=menu]')).toBeFalsy();
+
     // Open Menu Select
+    await wrapper.find('[data-id=activator]').trigger('focus');
     await wrapper.find('[data-id=activator]').trigger('click');
     await vi.delay();
     await nextTick();

diff --git a/src/components/forms/auto-complete/RuiAutoComplete.vue b/src/components/forms/auto-complete/RuiAutoComplete.vue
@@ -417,7 +417,6 @@ watch(anyFocused, (focused) => {
 });
 
 function onInputFocused() {
-  set(isOpen, true);
   set(focusedValueIndex, -1);
   if (get(shouldApplyValueAsSearch))
     get(textInput)?.select();
@@ -460,7 +459,13 @@ function chipListener(item: (T extends string ? T : Record<K, T>), index: number
 }
 
 function onEnter(event: KeyboardEvent) {
-  if (get(filteredOptions).length > 0 && get(highlightedIndex) > -1 && get(isOpen)) {
+  if (!get(isOpen)) {
+    set(isOpen, true);
+    event.preventDefault();
+    return;
+  }
+
+  if (get(filteredOptions).length > 0 && get(highlightedIndex) > -1) {
     applyHighlighted();
     event.preventDefault();
   }