diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue index bffe481958..be01b87adc 100644 --- a/packages/nc-gui/components/cell/MultiSelect.vue +++ b/packages/nc-gui/components/cell/MultiSelect.vue @@ -53,14 +53,14 @@ const isEditable = inject(EditModeInj, ref(false)) const activeCell = inject(ActiveCellInj, ref(false)) +const isForm = inject(IsFormInj, ref(false)) + // use both ActiveCellInj or EditModeInj to determine the active state // since active will be false in case of form view -const active = computed(() => activeCell.value || isEditable.value) +const active = computed(() => activeCell.value || isEditable.value || isForm.value) const isPublic = inject(IsPublicInj, ref(false)) -const isForm = inject(IsFormInj, ref(false)) - const isEditColumn = inject(EditColumnInj, ref(false)) const rowHeight = inject(RowHeightInj, ref(undefined)) @@ -71,6 +71,8 @@ const aselect = ref() const isOpen = ref(false) +const isFocusing = ref(false) + const isKanban = inject(IsKanbanInj, ref(false)) const searchVal = ref() @@ -180,9 +182,7 @@ watch(isOpen, (n, _o) => { if (!n) searchVal.value = '' if (editAllowed.value) { - if (!n) { - aselect.value?.$el?.querySelector('input')?.blur() - } else { + if (n) { aselect.value?.$el?.querySelector('input')?.focus() } } @@ -303,6 +303,9 @@ const cellClickHook = inject(CellClickHookInj, null) const toggleMenu = () => { if (cellClickHook) return + + if (isFocusing.value) return + isOpen.value = editAllowed.value && !isOpen.value } @@ -351,6 +354,16 @@ const onKeyDown = (e: KeyboardEvent) => { e.stopPropagation() } + +const onFocus = () => { + isFocusing.value = true + + setTimeout(() => { + isFocusing.value = false + }, 250) + + isOpen.value = true +}