Skip to content
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit e8b3c3c

Browse files
committed
fix(BModal, BOffcanvas): use onKeyDown vs onKeyUp
refactor: use onKeyStroke for BModal & BOffcanvas
1 parent cc00e76 commit e8b3c3c

File tree

2 files changed

+17
-4
lines changed

2 files changed

+17
-4
lines changed

packages/bootstrap-vue-next/src/components/BModal.vue

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
:aria-describedby="`${computedId}-body`"
2020
tabindex="-1"
2121
v-bind="$attrs"
22-
@keyup.esc="hide('esc')"
2322
>
2423
<div class="modal-dialog" :class="modalDialogClasses">
2524
<div v-if="lazyShowing" class="modal-content" :class="contentClass">
@@ -100,7 +99,7 @@
10099
<script setup lang="ts">
101100
import {computed, ref, type RendererElement, useSlots} from 'vue'
102101
import {useBooleanish, useId, useModalManager, useSafeScrollLock} from '../composables'
103-
import {useEventListener, useFocus, useVModel} from '@vueuse/core'
102+
import {onKeyStroke, useEventListener, useFocus, useVModel} from '@vueuse/core'
104103
import type {Booleanish, ButtonVariant, ClassValue, ColorVariant, Size} from '../types'
105104
import {BvTriggerableEvent, isEmptySlot} from '../utils'
106105
import BButton from './BButton/BButton.vue'
@@ -291,6 +290,13 @@ const closeButton = ref<HTMLElement | null>(null)
291290
const isActive = ref(modelValueBoolean.value)
292291
const lazyLoadCompleted = ref(false)
293292
293+
onKeyStroke(
294+
'Escape',
295+
() => {
296+
hide('esc')
297+
},
298+
{target: element}
299+
)
294300
useSafeScrollLock(modelValueBoolean, bodyScrollingBoolean)
295301
const {focused: modalFocus} = useFocus(element, {
296302
initialValue: modelValueBoolean.value && props.autoFocusButton === undefined,

packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
:aria-labelledby="`${computedId}-offcanvas-label`"
2525
data-bs-backdrop="false"
2626
v-bind="$attrs"
27-
@keyup.esc="hide('esc')"
2827
>
2928
<template v-if="lazyShowing">
3029
<div v-if="!noHeaderBoolean" class="offcanvas-header" :class="headerClass">
@@ -66,7 +65,7 @@
6665

6766
<script setup lang="ts">
6867
import {computed, nextTick, ref, type RendererElement, useSlots} from 'vue'
69-
import {useEventListener, useFocus, useVModel} from '@vueuse/core'
68+
import {onKeyStroke, useEventListener, useFocus, useVModel} from '@vueuse/core'
7069
import {useBooleanish, useId, useSafeScrollLock} from '../../composables'
7170
import type {Booleanish, ColorVariant} from '../../types'
7271
import {BvTriggerableEvent, isEmptySlot} from '../../utils'
@@ -189,6 +188,14 @@ useSafeScrollLock(modelValueBoolean, bodyScrollingBoolean)
189188
190189
const element = ref<HTMLElement | null>(null)
191190
191+
onKeyStroke(
192+
'Escape',
193+
() => {
194+
hide('esc')
195+
},
196+
{target: element}
197+
)
198+
192199
const {focused} = useFocus(element, {
193200
initialValue: modelValueBoolean.value && noFocusBoolean.value === false,
194201
})

0 commit comments

Comments
 (0)