From 8600392fd1a166883ad9c060bc9b734134fa46bf Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 4 Sep 2023 13:24:03 +0200
Subject: [PATCH 1/7] chore(NcModal): add more field examples in docs

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcModal/NcModal.vue | 40 ++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index 888103ee99..62c8bbb4c7 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/src/components/NcModal/NcModal.vue
@@ -73,14 +73,30 @@ export default {
 		<NcButton @click="showModal">Show Modal with fields</NcButton>
 		<NcModal
 			v-if="modal"
+			ref="modalRef"
 			@close="closeModal"
 			name="Name inside modal">
 			<div class="modal__content">
 				<h2>Please enter your name</h2>
-				<NcTextField label="First Name" :value.sync="firstName" />
-				<NcTextField label="Last Name" :value.sync="lastName" />
+				<div class="form-group">
+					<NcTextField label="First Name" :value.sync="firstName" />
+				</div>
+				<div class="form-group">
+					<NcTextField label="Last Name" :value.sync="lastName" />
+				</div>
+				<div class="form-group">
+					<label for="pizza">What is the most important pizza item?</label>
+					<NcSelect input-id="pizza" :options="['Cheese', 'Tomatos', 'Pineapples']" v-model="pizza" />
+				</div>
+				<div class="form-group">
+					<label for="emoji-trigger">Select your favorite emoji</label>
+					<NcEmojiPicker v-if="modalRef" :container="modalRef.$el">
+						<NcButton id="emoji-trigger">Select</NcButton>
+					</NcEmojiPicker>
+				</div>
+
 				<NcButton
-					:disabled="!this.firstName || !this.lastName"
+					:disabled="!firstName || !lastName || !pizza"
 					@click="closeModal"
 					type="primary">
 					Submit
@@ -90,12 +106,20 @@ export default {
 	</div>
 </template>
 <script>
+import { ref } from 'vue'
+
 export default {
+	setup() {
+		return {
+			modalRef: ref(null),
+		}
+	},
 	data() {
 		return {
 			modal: false,
 			firstName: '',
 			lastName: '',
+			pizza: [],
 		}
 	},
 	methods: {
@@ -113,11 +137,17 @@ export default {
 <style scoped>
 .modal__content {
 	margin: 50px;
+}
+
+.modal__content h2 {
 	text-align: center;
 }
 
-.input-field {
-	margin: 12px 0px;
+.form-group {
+	margin: calc(var(--default-grid-baseline) * 4) 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
 }
 </style>
 ```

From d70323acb5fc677f24b7012976da25c2211cd310 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Fri, 1 Sep 2023 14:37:29 +0200
Subject: [PATCH 2/7] fix(NcAppSidebar): stop propagation of ESC in title edit

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcAppSidebar/NcAppSidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index 075d7f4715..488506991d 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -418,7 +418,7 @@ export default {
 											type="text"
 											:placeholder="namePlaceholder"
 											:value="name"
-											@keydown.esc="onDismissEditing"
+											@keydown.esc.stop="onDismissEditing"
 											@input="onNameInput">
 										<NcButton type="tertiary-no-background"
 											:aria-label="changeNameTranslated"

From 9fad4d979f65876c4e672b3d5f53461e1eccf9f6 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Fri, 1 Sep 2023 14:38:14 +0200
Subject: [PATCH 3/7] fix(NcAppSidebarTabs): stop propagation of keyboard
 navigation

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcAppSidebar/NcAppSidebarTabs.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
index 98a4918e81..f6baa13201 100644
--- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue
+++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -31,13 +31,13 @@
 		<div v-if="hasMultipleTabs"
 			role="tablist"
 			class="app-sidebar-tabs__nav"
-			@keydown.left.exact.prevent="focusPreviousTab"
-			@keydown.right.exact.prevent="focusNextTab"
-			@keydown.tab.exact.prevent="focusActiveTabContent"
-			@keydown.home.exact.prevent="focusFirstTab"
-			@keydown.end.exact.prevent="focusLastTab"
-			@keydown.33.exact.prevent="focusFirstTab"
-			@keydown.34.exact.prevent="focusLastTab">
+			@keydown.left.exact.prevent.stop="focusPreviousTab"
+			@keydown.right.exact.prevent.stop="focusNextTab"
+			@keydown.tab.exact.prevent.stop="focusActiveTabContent"
+			@keydown.home.exact.prevent.stop="focusFirstTab"
+			@keydown.end.exact.prevent.stop="focusLastTab"
+			@keydown.33.exact.prevent.stop="focusFirstTab"
+			@keydown.34.exact.prevent.stop="focusLastTab">
 			<NcCheckboxRadioSwitch v-for="tab in tabs"
 				:key="tab.id"
 				:aria-controls="`tab-${tab.id}`"

From 1f6bcc4e04212d6e45690f0bd263691be0b3311a Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Fri, 1 Sep 2023 15:02:59 +0200
Subject: [PATCH 4/7] fix(NcAppNavigationItem): stop propagation of ESC in
 InputConfirmCancel

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcAppNavigationItem/NcInputConfirmCancel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue b/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue
index 7056f216ce..7d7baafb4a 100644
--- a/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue
+++ b/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue
@@ -30,7 +30,7 @@
 <template>
 	<div class="app-navigation-input-confirm">
 		<form @submit.prevent="confirm"
-			@keydown.esc.exact.prevent="cancel"
+			@keydown.esc.exact.stop.prevent="cancel"
 			@click.stop.prevent>
 			<input ref="input"
 				v-model="valueModel"

From 820dd9b49e71fc527b6f462f153da21fababfb5a Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 4 Sep 2023 14:10:09 +0200
Subject: [PATCH 5/7] fix(NcPopover): stop propagation of ESC on closing
 popover

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcPopover/NcPopover.vue | 41 +++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/NcPopover/NcPopover.vue b/src/components/NcPopover/NcPopover.vue
index 3e7fd06ef7..b7bb5d0faa 100644
--- a/src/components/NcPopover/NcPopover.vue
+++ b/src/components/NcPopover/NcPopover.vue
@@ -165,9 +165,17 @@ export default {
 
 	beforeDestroy() {
 		this.clearFocusTrap()
+		this.clearEscapeStopPropagation()
 	},
 
 	methods: {
+		/**
+		 * @return {HTMLElement|undefined}
+		 */
+		getPopoverContentElement() {
+			return this.$refs.popover?.$refs.popperContent?.$el
+		},
+
 		/**
 		 * Add focus trap for accessibility.
 		 */
@@ -178,7 +186,7 @@ export default {
 				return
 			}
 
-			const el = this.$refs.popover?.$refs.popperContent?.$el
+			const el = this.getPopoverContentElement()
 
 			if (!el) {
 				return
@@ -210,6 +218,35 @@ export default {
 			}
 		},
 
+		/**
+		 * Add stopPropagation for Escape.
+		 * It prevents global Escape handling after closing popover.
+		 *
+		 * Manual event handling is used here instead of v-on because there is no direct access to the node.
+		 * Alternative - wrap <template #popover> in a div wrapper.
+		 */
+		addEscapeStopPropagation() {
+			const el = this.getPopoverContentElement()
+			el?.addEventListener('keydown', this.stopKeydownEscapeHandler)
+		},
+
+		/**
+		 * Remove stop Escape handler
+		 */
+		clearEscapeStopPropagation() {
+			const el = this.getPopoverContentElement()
+			el?.removeEventListener('keydown', this.stopKeydownEscapeHandler)
+		},
+
+		/**
+		 * @param {KeyboardEvent} event - native keydown event
+		 */
+		stopKeydownEscapeHandler(event) {
+			if (event.type === 'keydown' && event.key === 'Escape') {
+				event.stopPropagation()
+			}
+		},
+
 		afterShow() {
 			/**
 			 * Triggered after the tooltip was visually displayed.
@@ -221,6 +258,7 @@ export default {
 			this.$nextTick(() => {
 				this.$emit('after-show')
 				this.useFocusTrap()
+				this.addEscapeStopPropagation()
 			})
 		},
 		afterHide() {
@@ -229,6 +267,7 @@ export default {
 			 */
 			this.$emit('after-hide')
 			this.clearFocusTrap()
+			this.clearEscapeStopPropagation()
 		},
 	},
 }

From 900d61e1f8659d2d83a18988981f7b4ac5c3e2ed Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 4 Sep 2023 14:12:19 +0200
Subject: [PATCH 6/7] chore(NcSelect): lint

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcSelect/NcSelect.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index 445a420761..4240d3e53c 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -749,7 +749,7 @@ export default {
 		/**
 		 * Array of options
 		 *
-		 * @type {Array<string | number | { [key: string | number]: any }>}
+		 * @type {Array<string | number | Record<string | number, any>>}
 		 *
 		 * @see https://vue-select.org/api/props.html#options
 		 */
@@ -804,7 +804,7 @@ export default {
 		 *
 		 * The `v-model` directive may be used for two-way data binding
 		 *
-		 * @type {string | number | { [key: string | number]: any } | Array<any>}
+		 * @type {string | number | Record<string | number, any> | Array<any>}
 		 *
 		 * @see https://vue-select.org/api/props.html#value
 		 */

From 2cb60f20f86187b48443c64b8c7b4f5faf3cbb4c Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 4 Sep 2023 14:49:41 +0200
Subject: [PATCH 7/7] fix(NcSelect): stop propagation of ESC on closing select

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcSelect/NcSelect.vue | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index 4240d3e53c..1a6ad4d2ff 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -768,6 +768,39 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Customized component's response to keydown events while the search input has focus
+		 *
+		 * @see https://vue-select.org/guide/keydown.html#mapkeydown
+		 */
+		mapKeydown: {
+			type: Function,
+			/**
+			 * Patched Vue-Select keydown events handlers map to stop Escape propagation in open select
+			 *
+			 * @param {Record<number, Function>} map - Mapped keyCode to handlers { <keyCode>:<callback> }
+			 * @param {import('@nextcloud/vue-select').VueSelect} vm - VueSelect instance
+			 * @return {Record<number, Function>} patched keydown event handlers
+			 */
+			default(map, vm) {
+				return {
+					...map,
+					/**
+					 * Patched Escape handler to stop propagation from open select
+					 *
+					 * @param {KeyboardEvent} event - default keydown event handler
+					 */
+					27: (event) => {
+						if (vm.open) {
+							event.stopPropagation()
+						}
+						// Default VueSelect's handler
+						map[27](event)
+					},
+				}
+			},
+		},
+
 		/**
 		 * When `appendToBody` is true, this sets the placement of the dropdown
 		 *