Skip to content
This repository has been archived by the owner on Sep 30, 2024. It is now read-only.

Commit

Permalink
fix(AutoComplete): fix UX to open menu after autocomplete focus
Browse files Browse the repository at this point in the history
  • Loading branch information
lukicenturi committed Jun 25, 2024
1 parent 4d7bff9 commit faf8950
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 3 deletions.
5 changes: 5 additions & 0 deletions src/components/forms/auto-complete/RuiAutoComplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
17 changes: 15 additions & 2 deletions src/components/forms/auto-complete/RuiAutoComplete.vue
Original file line number Diff line number Diff line change
Expand Up @@ -417,7 +417,6 @@ watch(anyFocused, (focused) => {
});
function onInputFocused() {
set(isOpen, true);
set(focusedValueIndex, -1);
if (get(shouldApplyValueAsSearch))
get(textInput)?.select();
Expand Down Expand Up @@ -470,6 +469,10 @@ function onEnter(event: KeyboardEvent) {
set(isOpen, false);
event.preventDefault();
}
else if (!get(isOpen)) {
set(isOpen, true);
event.preventDefault();
}
}
function onTab(event: KeyboardEvent) {
Expand Down Expand Up @@ -503,6 +506,13 @@ const inputClass: ComputedRef<string> = computed(() => {
return 'flex-1 min-w-0';
});
function arrowClicked(event: any) {
if (get(isOpen)) {
set(isOpen, false);
event.stopPropagation();
}
}
defineExpose({
focus: setInputFocus,
setSelectionRange,
Expand Down Expand Up @@ -662,7 +672,10 @@ defineExpose({
/>
</span>

<span :class="css.icon__wrapper">
<span
:class="css.icon__wrapper"
@click="arrowClicked($event)"
>
<RuiIcon
:class="[css.icon, { 'rotate-180': open }]"
:size="dense ? 24 : 32"
Expand Down
4 changes: 3 additions & 1 deletion src/composables/dropdown-menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,10 @@ export function useDropdownMenu<T, K extends keyof T>({
});

const moveHighlight = (up: boolean) => {
if (get(!isOpen))
if (!get(isOpen)) {
toggle(true);
return;
}

let position = get(highlightedIndex);
const move = up ? -1 : 1;
Expand Down

0 comments on commit faf8950

Please sign in to comment.