Browse Source

fix(gui): block cell level arrow navigation when single select is open

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4222/head
Pranav C 2 years ago
parent
commit
e92f8f1b25
  1. 21
      packages/nc-gui/components/cell/SingleSelect.vue

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

@ -2,7 +2,17 @@
import tinycolor from 'tinycolor2'
import type { Select as AntSelect } from 'ant-design-vue'
import type { SelectOptionType } from 'nocodb-sdk'
import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
import {
ActiveCellInj,
ColumnInj,
IsKanbanInj,
ReadonlyInj,
computed,
inject,
ref,
useEventListener,
watch,
} from '#imports'
interface Props {
modelValue?: string | undefined
@ -34,7 +44,7 @@ const options = computed<SelectOptionType[]>(() => {
if (column?.value.colOptions) {
const opts = column.value.colOptions
? // todo: fix colOptions type, options does not exist as a property
(column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
(column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
: []
for (const op of opts.filter((el: any) => el.order === null)) {
op.title = op.title.replace(/^'/, '').replace(/'$/, '')
@ -50,6 +60,11 @@ const handleKeys = (e: KeyboardEvent) => {
e.preventDefault()
isOpen.value = false
break
case 'ArrowDown':
case 'ArrowUp':
case 'Enter':
e.stopPropagation()
break
}
}
@ -110,9 +125,11 @@ watch(isOpen, (n, _o) => {
.rounded-tag {
@apply py-0 px-[12px] rounded-[12px];
}
:deep(.ant-tag) {
@apply "rounded-tag";
}
:deep(.ant-select-clear) {
opacity: 1;
}

Loading…
Cancel
Save