fix: basically just undo my previous modal changes

This commit is contained in:
freeplay 2023-06-24 16:35:56 -04:00
parent 1560ece843
commit 8de8e68a27
3 changed files with 59 additions and 54 deletions

View File

@ -3,7 +3,6 @@
ref="focusTrap" ref="focusTrap"
v-model:active="isActive" v-model:active="isActive"
:return-focus-on-deactivate="!noReturnFocus" :return-focus-on-deactivate="!noReturnFocus"
:initial-focus="() => itemsEl.children[0]"
@deactivate="emit('close')" @deactivate="emit('close')"
> >
<div> <div>

View File

@ -14,16 +14,17 @@
:duration="transitionDuration" :duration="transitionDuration"
appear appear
@after-leave="emit('closed')" @after-leave="emit('closed')"
@keyup.esc="emit('click')"
@enter="emit('opening')" @enter="emit('opening')"
@after-enter="onOpened" @after-enter="onOpened"
> >
<FocusTrap <FocusTrap
v-model:active="isActive" v-model:active="isActive"
:return-focus-on-deactivate="false" :return-focus-on-deactivate="!noReturnFocus"
@deactivate="close"
> >
<div <div
v-show="manualShowing != null ? manualShowing : showing" v-show="manualShowing != null ? manualShowing : showing"
v-hotkey.global="keymap"
:class="[ :class="[
$style.root, $style.root,
{ {
@ -43,6 +44,7 @@
'--transformOrigin': transformOrigin, '--transformOrigin': transformOrigin,
}" }"
tabindex="-1" tabindex="-1"
v-focus
> >
<div <div
class="_modalBg data-cy-bg" class="_modalBg data-cy-bg"
@ -206,6 +208,10 @@ if (type === "drawer") {
maxHeight = window.innerHeight / 1.5; maxHeight = window.innerHeight / 1.5;
} }
const keymap = {
esc: () => emit("esc"),
};
const MARGIN = 16; const MARGIN = 16;
const align = () => { const align = () => {
@ -381,8 +387,6 @@ onMounted(() => {
{ immediate: true } { immediate: true }
); );
content.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')?.focus();
nextTick(() => { nextTick(() => {
new ResizeObserver((entries, observer) => { new ResizeObserver((entries, observer) => {
align(); align();

View File

@ -6,6 +6,7 @@
@keyup.esc="$emit('close')" @keyup.esc="$emit('close')"
@closed="$emit('closed')" @closed="$emit('closed')"
> >
<FocusTrap v-model:active="isActive">
<div <div
ref="rootEl" ref="rootEl"
class="ebkgoccj" class="ebkgoccj"
@ -56,6 +57,7 @@
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</FocusTrap>
</MkModal> </MkModal>
</template> </template>