Fix modal styles when attributes change

FacilMap · Nov 14, 2023 · e7d17f2 · e7d17f2
1 parent 8682f27
commit e7d17f2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/frontend/src/lib/components/ui/hybrid-popover.vue b/frontend/src/lib/components/ui/hybrid-popover.vue
@@ -6,11 +6,12 @@
 </script>
 
 <script setup lang="ts">
-	import { ref, watch } from "vue";
+	import { ref, toRef, watch } from "vue";
 	import { useModal } from "../../utils/modal";
 	import { useMaxBreakpoint } from "../../utils/bootstrap";
 	import Popover from "./popover.vue";
 	import { useRefWithOverride } from "../../utils/vue";
+	import AttributePreservingElement from "./attribute-preserving-element.vue";
 
 	const props = withDefaults(defineProps<{
 		show?: boolean;
@@ -54,7 +55,8 @@
 
 	const trigger = ref<HTMLElement>();
 
-	const modalRef = ref<HTMLElement>();
+	const modalElementRef = ref<InstanceType<typeof AttributePreservingElement>>();
+	const modalRef = toRef(() => modalElementRef.value?.elementRef);
 	const modal = useModal(modalRef, {
 		onShown: () => {
 			emit("shown");
@@ -109,7 +111,15 @@
 		</Popover>
 
 		<Teleport to="body">
-			<div v-if="showModal" class="modal fade" :class="props.customClass" tabindex="-1" aria-hidden="true" ref="modalRef">
+			<AttributePreservingElement
+				v-if="showModal"
+				tag="div"
+				class="modal fade"
+				:class="props.customClass"
+				tabindex="-1"
+				aria-hidden="true"
+				ref="modalElementRef"
+			>
 				<div class="modal-dialog modal-dialog-scrollable">
 					<div class="modal-content">
 						<div v-if="props.title" class="modal-header">
@@ -124,7 +134,7 @@
 						</div>
 					</div>
 				</div>
-			</div>
+			</AttributePreservingElement>
 		</Teleport>
 	</div>
 </template>
diff --git a/frontend/src/lib/components/ui/modal-dialog.vue b/frontend/src/lib/components/ui/modal-dialog.vue
@@ -4,6 +4,7 @@
 	import ValidatedForm, { type CustomSubmitEvent } from "./validated-form/validated-form.vue";
 	import type { ThemeColour } from "../../utils/bootstrap";
 	import { useUnloadHandler } from "../../utils/utils";
+	import AttributePreservingElement from "./attribute-preserving-element.vue";
 
 	const props = withDefaults(defineProps<{
 		title?: string;
@@ -35,7 +36,8 @@
 	const isSubmitting = computed(() => validatedFormRef.value?.formData.isSubmitting);
 	const submitRef = ref<HTMLElement>();
 
-	const modalRef = ref<HTMLElement>();
+	const modalElementRef = ref<InstanceType<typeof AttributePreservingElement>>();
+	const modalRef = toRef(() => modalElementRef.value?.elementRef);
 	const modal = useModal(modalRef, {
 		onShown: () => {
 			const focusEl = (
@@ -78,15 +80,16 @@
 
 <template>
 	<Teleport to="body">
-		<div
+		<AttributePreservingElement
+			tag="div"
 			class="modal fade fm-modal"
 			:class="[
 				props.size !== 'default' ? `modal-${props.size}` : undefined,
 				props.class
 			]"
 			tabindex="-1"
 			aria-hidden="true"
-			ref="modalRef"
+			ref="modalElementRef"
 		>
 			<div class="modal-dialog modal-dialog-scrollable">
 				<ValidatedForm
@@ -133,7 +136,7 @@
 					</div>
 				</ValidatedForm>
 			</div>
-		</div>
+		</AttributePreservingElement>
 	</Teleport>
 </template>