Maintenance: Desktop View - Prevent flyout from closing on escape keypress...

Co-authored-by: Benjamin Scharf <bs@zammad.com>

app/frontend/apps/desktop/components/CommonFlyout/CommonFlyout.vue

@@ -5,8 +5,8 @@ import {
   useWindowSize,
   useLocalStorage,
   useScroll,
-  onKeyUp,
   useActiveElement,
+  onKeyDown,
 } from '@vueuse/core'
 import {
   computed,
@@ -179,7 +179,7 @@ onMounted(async () => {
 })
 
 // Keyboard
-onKeyUp('Escape', (e) => {
+onKeyDown('Escape', (e) => {
   if (props.noCloseOnEscape) return
   stopEvent(e)
   close()

app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue

@@ -36,6 +36,7 @@ import { useFormBlock } from '#shared/form/useFormBlock.ts'
 import { i18n } from '#shared/i18n.ts'
 import { QueryHandler } from '#shared/server/apollo/handler/index.ts'
 import type { ObjectLike } from '#shared/types/utils.ts'
+import stopEvent from '#shared/utils/events.ts'
 
 import CommonInputSearch from '#desktop/components/CommonInputSearch/CommonInputSearch.vue'
 import CommonSelect from '#desktop/components/CommonSelect/CommonSelect.vue'
@@ -464,6 +465,17 @@ const OptionIconComponent =
   props.context.optionIconComponent ??
   (FieldAutoCompleteOptionIcon as ConcreteComponent)
 
+const handleCloseDropdown = (
+  event: KeyboardEvent,
+  expanded: boolean,
+  closeDropdown: () => void,
+) => {
+  if (expanded) {
+    stopEvent(event)
+    closeDropdown()
+  }
+}
+
 watch(filter, (newValue, oldValue) => {
   if (newValue !== oldValue) {
     isUserTyping.value = true
@@ -543,7 +555,7 @@ useFormBlock(
         :data-multiple="context.multiple"
         tabindex="0"
         v-bind="context.attrs"
-        @keydown.escape.prevent="closeDropdown()"
+        @keydown.escape="handleCloseDropdown($event, expanded, closeDropdown)"
         @keypress.enter.prevent="openSelectDropdown()"
         @keydown.down.prevent="openOrMoveFocusToDropdown()"
         @keydown.up.prevent="openOrMoveFocusToDropdown(true)"

app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue

@@ -18,6 +18,7 @@ import useSelectPreselect from '#shared/composables/useSelectPreselect.ts'
 import { useTrapTab } from '#shared/composables/useTrapTab.ts'
 import { useFormBlock } from '#shared/form/useFormBlock.ts'
 import { i18n } from '#shared/i18n.ts'
+import stopEvent from '#shared/utils/events.ts'
 
 import CommonInputSearch from '#desktop/components/CommonInputSearch/CommonInputSearch.vue'
 import CommonSelect from '#desktop/components/CommonSelect/CommonSelect.vue'
@@ -157,6 +158,17 @@ const handleToggleDropdown = (event: MouseEvent) => {
   openSelectDropdown()
 }
 
+const handleCloseDropdown = (
+  event: KeyboardEvent,
+  expanded: boolean,
+  closeDropdown: () => void,
+) => {
+  if (expanded) {
+    stopEvent(event)
+    closeDropdown()
+  }
+}
+
 useFormBlock(
   contextReactive,
   useDebounceFn((event) => {
@@ -217,7 +229,7 @@ setupMissingOrDisabledOptionHandling()
         :aria-describedby="context.describedBy"
         :tabindex="expanded && !context.noFiltering ? '-1' : '0'"
         v-bind="context.attrs"
-        @keydown.escape.prevent="closeDropdown()"
+        @keydown.escape="handleCloseDropdown($event, expanded, closeDropdown)"
         @keypress.enter.prevent="openSelectDropdown()"
         @keydown.down.prevent="openOrMoveFocusToDropdown()"
         @keydown.up.prevent="openOrMoveFocusToDropdown(true)"

app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue

@@ -19,6 +19,7 @@ import useSelectPreselect from '#shared/composables/useSelectPreselect.ts'
 import { useTrapTab } from '#shared/composables/useTrapTab.ts'
 import { useFormBlock } from '#shared/form/useFormBlock.ts'
 import { i18n } from '#shared/i18n.ts'
+import stopEvent from '#shared/utils/events.ts'
 
 import CommonInputSearch from '#desktop/components/CommonInputSearch/CommonInputSearch.vue'
 
@@ -216,6 +217,17 @@ const onHandleToggleDropdown = (event: MouseEvent) => {
   openSelectDropdown()
 }
 
+const handleCloseDropdown = (
+  event: KeyboardEvent,
+  expanded: boolean,
+  closeDropdown: () => void,
+) => {
+  if (expanded) {
+    stopEvent(event)
+    closeDropdown()
+  }
+}
+
 useFormBlock(contextReactive, openSelectDropdown)
 
 useSelectPreselect(flatOptions, contextReactive)
@@ -278,7 +290,7 @@ setupMissingOrDisabledOptionHandling()
         aria-haspopup="menu"
         :aria-expanded="expanded"
         :aria-describedby="context.describedBy"
-        @keydown.escape.prevent="closeDropdown()"
+        @keydown.escape="handleCloseDropdown($event, expanded, closeDropdown)"
         @keypress.enter.prevent="openSelectDropdown()"
         @keydown.down.prevent="openOrMoveFocusToDropdown()"
         @keydown.up.prevent="openOrMoveFocusToDropdown(true)"

i18n/zammad.pot

@@ -113,8 +113,8 @@ msgid "%s (option)"
 msgstr ""
 
 #: app/frontend/apps/desktop/components/CommonSelect/CommonSelect.vue:303
-#: app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue:583
-#: app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue:258
+#: app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue:595
+#: app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue:270
 #: app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInputDropdown.vue:374
 #: app/frontend/apps/mobile/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue:149
 #: app/frontend/apps/mobile/components/Form/fields/FieldSelect/FieldSelectInput.vue:108
@@ -2816,10 +2816,10 @@ msgid "Clear Search"
 msgstr ""
 
 #: app/assets/javascripts/app/views/generic/searchable_select.jst.eco:56
-#: app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue:667
+#: app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue:679
 #: app/frontend/apps/desktop/components/Form/fields/FieldDate/FieldDateTimeInput.vue:138
-#: app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue:321
-#: app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue:370
+#: app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue:333
+#: app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue:382
 #: app/frontend/apps/mobile/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue:155
 #: app/frontend/apps/mobile/components/Form/fields/FieldDate/FieldDateTimeInput.vue:159
 #: app/frontend/apps/mobile/components/Form/fields/FieldSelect/FieldSelectInput.vue:137
@@ -16555,9 +16555,9 @@ msgstr ""
 msgid "Unsaved Changes"
 msgstr ""
 
-#: app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue:593
-#: app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue:267
-#: app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue:322
+#: app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue:605
+#: app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue:279
+#: app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue:334
 msgid "Unselect Option"
 msgstr ""