Browse Source

feat: open select options on enter key press

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

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

@ -16,6 +16,7 @@ import {
useProject,
watch,
} from '#imports'
import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
import MdiCloseCircle from '~icons/mdi/close-circle'
interface Props {
@ -93,9 +94,13 @@ const handleKeys = (e: KeyboardEvent) => {
break
case 'ArrowDown':
case 'ArrowUp':
e.stopPropagation()
break
case 'Enter':
isOpen.value = true
e.stopPropagation()
break
}
}
@ -135,11 +140,17 @@ watch(
watch(isOpen, (n, _o) => {
if (!n) aselect.value?.$el.blur()
})
useEventListener(document, 'keydown', (e) => {
if (active.value && e.key === 'Enter') {
isOpen.value = true
}
})
</script>
<template>
<a-select
ref="aselect"
ref="select"
v-model:value="vModel"
mode="multiple"
class="w-full"
@ -223,18 +234,23 @@ watch(isOpen, (n, _o) => {
margin-right: -6px;
margin-left: 3px;
}
.ms-close-icon:before {
display: block;
}
.ms-close-icon:hover {
color: rgba(0, 0, 0, 0.45);
}
.rounded-tag {
@apply py-0 px-[12px] rounded-[12px];
}
:deep(.ant-tag) {
@apply "rounded-tag" my-[2px];
}
:deep(.ant-tag-close-icon) {
@apply "text-slate-500";
}

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

@ -62,7 +62,10 @@ const handleKeys = (e: KeyboardEvent) => {
break
case 'ArrowDown':
case 'ArrowUp':
e.stopPropagation()
break
case 'Enter':
isOpen.value = true
e.stopPropagation()
break
}

Loading…
Cancel
Save