Skip to content

Commit

Permalink
fix: select combobox tab behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshuagraber
joshuagraber committed Nov 23, 2024
1 parent 87fa267 commit c4b8427
Showing 1 changed file with 25 additions and 48 deletions.
73 changes: 25 additions & 48 deletions src/components/InputSelect/PdapInputSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
v-bind="$attrs"
@click="handleClick"
@keydown="handleKeyDown"
@keyup="handleKeyUp"

Check failure on line 29 in src/components/InputSelect/PdapInputSelect.vue

View workflow job for this annotation

GitHub Actions / lint 

Property 'handleKeyUp' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{ filter: (searchText: string, options: PdapSelectOption[]) => PdapSelectOption[]; placeholder: string; combobox: boolean; }> & Omit<...>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ...'.

Check failure on line 29 in src/components/InputSelect/PdapInputSelect.vue

View workflow job for this annotation

GitHub Actions / build 

Property 'handleKeyUp' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{ filter: (searchText: string, options: PdapSelectOption[]) => PdapSelectOption[]; placeholder: string; combobox: boolean; }> & Omit<...>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ...'.

Check failure on line 29 in src/components/InputSelect/PdapInputSelect.vue

View workflow job for this annotation

GitHub Actions / Release 

Property 'handleKeyUp' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{ filter: (searchText: string, options: PdapSelectOption[]) => PdapSelectOption[]; placeholder: string; combobox: boolean; }> & Omit<...>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ...'.
>
<input
v-if="combobox"
Expand Down Expand Up @@ -86,6 +87,7 @@ import { PdapSelectOption as Option, PdapInputSelectProps } from './types';
import { PdapFormProvideV2 } from '../FormV2/types';
import { provideKey } from '../FormV2/util';
import { vOnClickOutside } from '../../directives';
import _isEqual from 'lodash/isEqual';
const { name, options, id, label, combobox, filter } = withDefaults(
defineProps<PdapInputSelectProps>(),
Expand Down Expand Up @@ -168,55 +170,30 @@ function handleClick() {
else toggleOpen();
}
// function handleKeyUp(event: KeyboardEvent) {
// if (event.key === 'Tab') {
// if (
// !event.shiftKey &&
// focusedOptionIndex.value === filteredOptions.value.length - 1
// ) {
// event.preventDefault();
// return;
// }
// if (event.shiftKey) {
// if (isOpen.value) {
// if (focusedOptionIndex.value === -1) {
// isOpen.value = false;
// }
// if (focusedOptionIndex.value === 0) {
// event.preventDefault();
// closeAndReturnFocus();
// } else {
// event.preventDefault();
// focusedOptionIndex.value = focusedOptionIndex.value - 1;
// }
// return;
// }
// }
// }
// }
function handleKeyDown(event: KeyboardEvent) {
// if (event.key === 'Tab') {
// if (
// !event.shiftKey &&
// focusedOptionIndex.value === filteredOptions.value.length - 1
// ) {
// event.preventDefault();
// return;
// }
// if (event.shiftKey && focusedOptionIndex.value === 0) {
// event.preventDefault();
// closeAndReturnFocus();
// } else {
// event.preventDefault();
// focusedOptionIndex.value = focusedOptionIndex.value - 1;
// }
// return;
// }
if (event.key === 'Tab') {
if (_isEqual(event.target, selectRef.value)) {
console.debug('is target', { event });
if (combobox && isOpen.value) isOpen.value = !isOpen.value;
}
// if (
// !event.shiftKey &&
// focusedOptionIndex.value === filteredOptions.value.length - 1
// ) {
// event.preventDefault();
// return;
// }
// if (event.shiftKey && focusedOptionIndex.value === 0) {
// event.preventDefault();
// closeAndReturnFocus();
// } else {
// event.preventDefault();
// focusedOptionIndex.value = focusedOptionIndex.value - 1;
// }
// return;
}
if (!isOpen.value) {
if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) {
Expand Down

0 comments on commit c4b8427

Please # to comment.