Browse Source

fix: clear icon in multi select

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4406/head
Pranav C 2 years ago
parent
commit
26d7759c9e
  1. 15
      packages/nc-gui/components/cell/MultiSelect.vue
  2. 5
      packages/nc-gui/components/cell/SingleSelect.vue

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

@ -95,7 +95,7 @@ const vModel = computed({
return selected return selected
}, },
set: (val) => { set: (val) => {
if (isOptionMissing.value && val[val.length - 1] === searchVal.value) { if (isOptionMissing.value && val.length && val[val.length - 1] === searchVal.value) {
return addIfMissingAndSave() return addIfMissingAndSave()
} }
emit('update:modelValue', val.length === 0 ? null : val.join(',')) emit('update:modelValue', val.length === 0 ? null : val.join(','))
@ -219,6 +219,17 @@ async function addIfMissingAndSave() {
const search = () => { const search = () => {
searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
} }
const onTagClick = (e: Event, onClose: Function) => {
// check clicked element is remove icon
if (
(e.target as HTMLElement)?.classList.contains('ant-tag-close-icon') ||
(e.target as HTMLElement)?.closest('.ant-tag-close-icon')
) {
e.stopPropagation()
onClose()
}
}
</script> </script>
<template> <template>
@ -229,6 +240,7 @@ const search = () => {
mode="multiple" mode="multiple"
class="w-full" class="w-full"
:bordered="false" :bordered="false"
clear-icon
:show-arrow="!readOnly" :show-arrow="!readOnly"
:show-search="active || editable" :show-search="active || editable"
:open="isOpen && (active || editable)" :open="isOpen && (active || editable)"
@ -272,6 +284,7 @@ const search = () => {
<template #tagRender="{ value: val, onClose }"> <template #tagRender="{ value: val, onClose }">
<a-tag <a-tag
@click="onTagClick($event, onClose)"
v-if="options.find((el) => el.title === val)" v-if="options.find((el) => el.title === val)"
class="rounded-tag nc-selected-option" class="rounded-tag nc-selected-option"
:style="{ display: 'flex', alignItems: 'center' }" :style="{ display: 'flex', alignItems: 'center' }"

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

@ -138,11 +138,10 @@ const search = () => {
const toggleMenu = (e: Event) => { const toggleMenu = (e: Event) => {
// todo: refactor // todo: refactor
// check clicked element is clear icon
if ( if (
(e.target as HTMLElement)?.classList.contains('ant-select-clear') || (e.target as HTMLElement)?.classList.contains('ant-select-clear') ||
(e.target as HTMLElement)?.parentElement?.classList.contains('ant-select-clear') || (e.target as HTMLElement)?.closest('.ant-select-clear')
(e.target as HTMLElement)?.parentElement?.parentElement?.classList.contains('ant-select-clear') ||
(e.target as HTMLElement)?.parentElement?.parentElement?.parentElement?.classList.contains('ant-select-clear')
) { ) {
vModel.value = '' vModel.value = ''
return return

Loading…
Cancel
Save