From 706f0162a53d6c72b723be79fe36b5c672aaf9b5 Mon Sep 17 00:00:00 2001 From: f Date: Wed, 5 Jun 2024 18:01:44 -0300 Subject: [PATCH] feat: pasar el foco al modal al abrir y volver al cerrar --- app/javascript/controllers/modal_controller.js | 12 +++++++++++- app/views/posts/attributes/_new_has_one.haml | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js index 2ffdedaa..1d89c826 100644 --- a/app/javascript/controllers/modal_controller.js +++ b/app/javascript/controllers/modal_controller.js @@ -26,7 +26,7 @@ export default class extends Controller { if (!event.target?.dataset?.modalShowValue) return; - window.dispatchEvent(new CustomEvent("modal:show", { detail: { id: event.target.dataset.modalShowValue } })); + window.dispatchEvent(new CustomEvent("modal:show", { detail: { id: event.target.dataset.modalShowValue, previousFocus: event.target.id } })); } /* @@ -50,9 +50,17 @@ export default class extends Controller { window.document.body.classList.add("modal-open"); + if (event?.detail?.previousFocus) { + this.previousFocus = window.document.getElementById(event.detail.previousFocus); + } else { + this.previousFocus = event?.target; + } + setTimeout(() => { this.modalTarget.classList.add("show"); this.backdropTarget.classList.add("show"); + + this.modalTarget.focus(); }, 1); } @@ -75,6 +83,8 @@ export default class extends Controller { this.modalTarget.removeAttribute("role"); this.modalTarget.removeAttribute("aria-modal"); + this.previousFocus?.focus(); + setTimeout(() => { this.modalTarget.style.display = ""; this.backdropTarget.style.display = ""; diff --git a/app/views/posts/attributes/_new_has_one.haml b/app/views/posts/attributes/_new_has_one.haml index 4235b9b3..58e098b6 100644 --- a/app/views/posts/attributes/_new_has_one.haml +++ b/app/views/posts/attributes/_new_has_one.haml @@ -25,7 +25,7 @@ = hidden_field_tag name, '' .d-flex.align-items-center.justify-content-between = label_tag id, post_label_t(attribute, post: post), class: 'h3' - = render 'bootstrap/btn', content: t('.edit'), action: 'modal#showAnother', data: { 'modal-show-value': modal_id } + = render 'bootstrap/btn', content: t('.edit'), action: 'modal#showAnother', data: { 'modal-show-value': modal_id }, id: random_id -# Aquí se reemplaza por la tarjeta y el UUID luego de guardar .row.row-cols-1.no-gutters.placeholder-glow{ id: target_id }