Browse Source

fix: proper multi/single select behaviour with keyboard

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4222/head
Pranav C 2 years ago
parent
commit
07728342d8
  1. 23
      packages/nc-gui/components/cell/MultiSelect.vue
  2. 34
      packages/nc-gui/components/cell/SingleSelect.vue
  3. 4
      packages/nc-gui/components/smartsheet/Cell.vue

23
packages/nc-gui/components/cell/MultiSelect.vue

@ -86,25 +86,8 @@ const selectedTitles = computed(() =>
: [],
)
const v = Math.floor(Math.random() * 1000)
const handleKeys = (e: KeyboardEvent) => {
console.log(`handleKeys ${v}`, e.key)
if (!active.value) return true
switch (e.key) {
case 'ArrowDown':
case 'ArrowUp':
if (isOpen.value) {
e.stopPropagation()
}
break
case 'Enter':
e.stopPropagation()
break
}
}
const handleClose = (e: MouseEvent) => {
if (aselect.value && !aselect.value.$el.contains(e.target)) {
isOpen.value = false
@ -146,17 +129,14 @@ watch(isOpen, (n, _o) => {
}
})
useSelectedCellKeyupListener(active, (e) => {
switch (e.key) {
case 'Escape':
isOpen.value = false
select?.value?.blur()
break
case 'Enter':
if (active.value && !isOpen.value) {
isOpen.value = true
e.stopPropagation()
}
break
}
@ -167,15 +147,16 @@ useSelectedCellKeyupListener(active, (e) => {
<a-select
ref="aselect"
v-model:value="vModel"
v-model:open="isOpen"
mode="multiple"
class="w-full"
:bordered="false"
:show-arrow="!readOnly"
:show-search="false"
v-model:open="isOpen"
:disabled="readOnly"
:class="{ '!ml-[-8px]': readOnly }"
:dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
@keydown.enter.stop
@click="isOpen = active && !isOpen"
>
<a-select-option

34
packages/nc-gui/components/cell/SingleSelect.vue

@ -45,24 +45,6 @@ const options = computed<SelectOptionType[]>(() => {
return []
})
const handleKeys = (e: KeyboardEvent) => {
switch (e.key) {
case 'Escape':
e.preventDefault()
isOpen.value = false
break
case 'ArrowDown':
case 'ArrowUp':
if (isOpen.value) e.stopPropagation()
break
case 'Enter':
isOpen.value = true
e.stopPropagation()
break
}
}
const handleClose = (e: MouseEvent) => {
if (aselect.value && !aselect.value.$el.contains(e.target)) {
isOpen.value = false
@ -72,7 +54,6 @@ const handleClose = (e: MouseEvent) => {
useEventListener(document, 'click', handleClose)
watch(isOpen, (n, _o) => {
if (!n) {
aselect.value?.$el?.querySelector('input')?.blur()
@ -80,6 +61,19 @@ watch(isOpen, (n, _o) => {
aselect.value?.$el?.querySelector('input')?.focus()
}
})
useSelectedCellKeyupListener(active, (e) => {
switch (e.key) {
case 'Escape':
isOpen.value = false
break
case 'Enter':
if (active.value && !isOpen.value) {
isOpen.value = true
}
break
}
})
</script>
<template>
@ -94,7 +88,7 @@ watch(isOpen, (n, _o) => {
:show-arrow="!readOnly && (active || vModel === null)"
:dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
@select="isOpen = false"
@keydown="isOpen ? handleKeys : null"
@keydown.enter.stop
@click="isOpen = active && !isOpen"
>
<a-select-option

4
packages/nc-gui/components/smartsheet/Cell.vue

@ -128,9 +128,9 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
<div
class="nc-cell w-full"
:class="[`nc-cell-${(column?.uidt || 'default').toLowerCase()}`, { 'text-blue-600': isPrimary && !virtual && !isForm }]"
><!-- @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
@keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
@keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"
>-->
>
<LazyCellTextArea v-if="isTextArea" v-model="vModel" />
<LazyCellCheckbox v-else-if="isBoolean" v-model="vModel" />
<LazyCellAttachment v-else-if="isAttachment" v-model="vModel" :row-index="props.rowIndex" />

Loading…
Cancel
Save