diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index e9d4aa9a7..572bc6125 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -1,5 +1,5 @@
diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue
index 2c99f69cd..0f8efb262 100644
--- a/front/src/components/ui/Input.vue
+++ b/front/src/components/ui/Input.vue
@@ -1,5 +1,5 @@
diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index cb8a5f71e..4b61bcbe7 100644
--- a/front/src/components/ui/Modal.vue
+++ b/front/src/components/ui/Modal.vue
@@ -13,7 +13,8 @@ const props = defineProps<{
overPopover?: true,
destructive?: true,
cancel?: string,
- icon? : string
+ icon?: string,
+ autofocus?: true | 'off'
} &(ColorProps | DefaultProps)>()
const isOpen = defineModel({ default: false })
@@ -23,8 +24,11 @@ const previouslyFocusedElement = ref()
// Handle focus and inertness of the elements behind the modal
watchEffect(() => {
if (isOpen.value) {
- previouslyFocusedElement.value = document.activeElement
- document.querySelector('#app')?.setAttribute('inert', 'true')
+ nextTick(()=>{
+ previouslyFocusedElement.value = document.activeElement
+ previouslyFocusedElement.value?.blur()
+ document.querySelector('#app')?.setAttribute('inert', 'true')
+ })
} else {
nextTick(() => previouslyFocusedElement.value?.focus())
document.querySelector('#app')?.removeAttribute('inert')
@@ -93,6 +97,7 @@ onKeyboardShortcut('escape', () => { isOpen.value = false })
icon="bi-x-lg"
ghost
align-self="baseline"
+ :autofocus="props.autofocus === undefined ? ($slots.actions || cancel ? undefined : true) : props.autofocus !== 'off'"
@click="isOpen = false"
/>
diff --git a/front/ui-docs/components/ui/modal.md b/front/ui-docs/components/ui/modal.md
index 36a26d5c4..bdbde89a9 100644
--- a/front/ui-docs/components/ui/modal.md
+++ b/front/ui-docs/components/ui/modal.md
@@ -335,6 +335,12 @@ primary
+## Auto-focus the close button
+
+If there are no action slots and no cancel button, the close button is auto-focused.
+
+The `autofocus` prop, when set to `off`, overrides this behavior.
+
## Responsivity
### Designing for small screens