From 4af48f799816fd3f7ff478e841414bbac5513a90 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Wed, 16 Sep 2020 11:05:02 +0200 Subject: [PATCH] FIX: attempts to make autofocus more resilient in modals (#10680) The current situation could cause a transition on the button to end after/during modal has shown and causing the button to get focus again. Browsers would then refuse to switch focus. This is a kinda convulted solution, but it's a general purpose solution which doesn't involve changing anything in plugins/themes or core templates. --- .../javascripts/discourse/app/components/d-modal.js | 11 +++++++++++ .../discourse/app/controllers/insert-hyperlink.js | 2 -- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/d-modal.js b/app/assets/javascripts/discourse/app/components/d-modal.js index 3b3354215ac..63e9e755dfa 100644 --- a/app/assets/javascripts/discourse/app/components/d-modal.js +++ b/app/assets/javascripts/discourse/app/components/d-modal.js @@ -1,3 +1,4 @@ +import afterTransition from "discourse/lib/after-transition"; import I18n from "I18n"; import { next } from "@ember/runloop"; import { on } from "discourse-common/utils/decorators"; @@ -116,5 +117,15 @@ export default Component.extend({ } else { this.set("dismissable", true); } + + if (this.element) { + const autofocusInputs = this.element.querySelectorAll( + ".modal-body input[autofocus]" + ); + + if (autofocusInputs.length) { + afterTransition(() => autofocusInputs[0].focus()); + } + } }, }); diff --git a/app/assets/javascripts/discourse/app/controllers/insert-hyperlink.js b/app/assets/javascripts/discourse/app/controllers/insert-hyperlink.js index e5600310560..d3821b2aa38 100644 --- a/app/assets/javascripts/discourse/app/controllers/insert-hyperlink.js +++ b/app/assets/javascripts/discourse/app/controllers/insert-hyperlink.js @@ -26,8 +26,6 @@ export default Controller.extend(ModalFunctionality, { element .closest(".modal-inner-container") .addEventListener("mousedown", this.mouseDown); - - document.activeElement.blur(); }); },