From ce53288bf0758c78d5f181e10a9443a083804ee7 Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Sat, 24 Jun 2023 16:35:56 -0400
Subject: [PATCH] fix: basically just undo my previous modal changes

---
 packages/client/src/components/MkMenu.vue     |   1 -
 packages/client/src/components/MkModal.vue    |  12 ++-
 .../client/src/components/MkModalWindow.vue   | 100 +++++++++---------
 3 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 5f0210c1f6..2d8fde610b 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -3,7 +3,6 @@
 		ref="focusTrap"
 		v-model:active="isActive"
 		:return-focus-on-deactivate="!noReturnFocus"
-		:initial-focus="() => itemsEl.children[0]"
 		@deactivate="emit('close')"
 	>
 		<div>
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index d48b6cbc54..e814c91e5b 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -14,16 +14,17 @@
 		:duration="transitionDuration"
 		appear
 		@after-leave="emit('closed')"
+		@keyup.esc="emit('click')"
 		@enter="emit('opening')"
 		@after-enter="onOpened"
 	>
 		<FocusTrap
 			v-model:active="isActive"
-			:return-focus-on-deactivate="false"
-			@deactivate="close"
+			:return-focus-on-deactivate="!noReturnFocus"
 		>
 			<div
 				v-show="manualShowing != null ? manualShowing : showing"
+				v-hotkey.global="keymap"
 				:class="[
 					$style.root,
 					{
@@ -43,6 +44,7 @@
 					'--transformOrigin': transformOrigin,
 				}"
 				tabindex="-1"
+				v-focus
 			>
 				<div
 					class="_modalBg data-cy-bg"
@@ -206,6 +208,10 @@ if (type === "drawer") {
 	maxHeight = window.innerHeight / 1.5;
 }
 
+const keymap = {
+	esc: () => emit("esc"),
+};
+
 const MARGIN = 16;
 
 const align = () => {
@@ -381,8 +387,6 @@ onMounted(() => {
 		{ immediate: true }
 	);
 
-	content.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')?.focus();
-
 	nextTick(() => {
 		new ResizeObserver((entries, observer) => {
 			align();
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index d947803dd6..740f84d6b0 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -6,56 +6,58 @@
 		@keyup.esc="$emit('close')"
 		@closed="$emit('closed')"
 	>
-		<div
-			ref="rootEl"
-			class="ebkgoccj"
-			:style="{
-				width: `${props.width}px`,
-				height: scroll
-					? height
-						? `${props.height}px`
-						: null
-					: height
-					? `min(${props.height}px, 100%)`
-					: '100%',
-			}"
-			tabindex="-1"
-		>
-			<div ref="headerEl" class="header">
-				<button
-					v-if="props.withOkButton"
-					:aria-label="i18n.t('close')"
-					class="_button"
-					@click="$emit('close')"
-					v-tooltip="i18n.ts.close"
-				>
-					<i class="ph-x ph-bold ph-lg"></i>
-				</button>
-				<span class="title">
-					<slot name="header"></slot>
-				</span>
-				<button
-					v-if="!props.withOkButton"
-					:aria-label="i18n.t('close')"
-					class="_button"
-					@click="$emit('close')"
-				>
-					<i class="ph-x ph-bold ph-lg"></i>
-				</button>
-				<button
-					v-if="props.withOkButton"
-					:aria-label="i18n.t('ok')"
-					class="_button"
-					:disabled="props.okButtonDisabled"
-					@click="$emit('ok')"
-				>
-					<i class="ph-check ph-bold ph-lg"></i>
-				</button>
+		<FocusTrap v-model:active="isActive">
+			<div
+				ref="rootEl"
+				class="ebkgoccj"
+				:style="{
+					width: `${props.width}px`,
+					height: scroll
+						? height
+							? `${props.height}px`
+							: null
+						: height
+						? `min(${props.height}px, 100%)`
+						: '100%',
+				}"
+				tabindex="-1"
+			>
+				<div ref="headerEl" class="header">
+					<button
+						v-if="props.withOkButton"
+						:aria-label="i18n.t('close')"
+						class="_button"
+						@click="$emit('close')"
+						v-tooltip="i18n.ts.close"
+					>
+						<i class="ph-x ph-bold ph-lg"></i>
+					</button>
+					<span class="title">
+						<slot name="header"></slot>
+					</span>
+					<button
+						v-if="!props.withOkButton"
+						:aria-label="i18n.t('close')"
+						class="_button"
+						@click="$emit('close')"
+					>
+						<i class="ph-x ph-bold ph-lg"></i>
+					</button>
+					<button
+						v-if="props.withOkButton"
+						:aria-label="i18n.t('ok')"
+						class="_button"
+						:disabled="props.okButtonDisabled"
+						@click="$emit('ok')"
+					>
+						<i class="ph-check ph-bold ph-lg"></i>
+					</button>
+				</div>
+				<div class="body">
+					<slot></slot>
+				</div>
 			</div>
-			<div class="body">
-				<slot></slot>
-			</div>
-		</div>
+		</FocusTrap>
 	</MkModal>
 </template>