diff --git a/app/assets/javascripts/discourse/app/components/d-modal-body.js b/app/assets/javascripts/discourse/app/components/d-modal-body.js index fada62686d1..27e092191b5 100644 --- a/app/assets/javascripts/discourse/app/components/d-modal-body.js +++ b/app/assets/javascripts/discourse/app/components/d-modal-body.js @@ -4,6 +4,7 @@ export default Component.extend({ classNames: ["modal-body"], fixed: false, dismissable: true, + autoFocus: true, didInsertElement() { this._super(...arguments); @@ -28,14 +29,6 @@ export default Component.extend({ }, _afterFirstRender() { - if ( - !this.site.mobileView && - this.autoFocus !== "false" && - this.element.querySelector("input") - ) { - this.element.querySelector("input").focus(); - } - const maxHeight = this.maxHeight; if (maxHeight) { const maxHeightFloat = parseFloat(maxHeight) / 100.0; @@ -57,7 +50,8 @@ export default Component.extend({ "subtitle", "rawSubtitle", "dismissable", - "headerClass" + "headerClass", + "autoFocus" ) ); }, diff --git a/app/assets/javascripts/discourse/app/components/d-modal.js b/app/assets/javascripts/discourse/app/components/d-modal.js index 8bb6568242a..144a9cc37da 100644 --- a/app/assets/javascripts/discourse/app/components/d-modal.js +++ b/app/assets/javascripts/discourse/app/components/d-modal.js @@ -132,13 +132,18 @@ export default Component.extend({ this.set("headerClass", data.headerClass || null); - if (this.element) { - const autofocusInputs = this.element.querySelectorAll( + if (this.element && data.autoFocus) { + let focusTarget = this.element.querySelector( ".modal-body input[autofocus]" ); - if (autofocusInputs.length) { - afterTransition(() => autofocusInputs[0].focus()); + if (!focusTarget && !this.site.mobileView) { + focusTarget = this.element.querySelector( + ".modal-body input, .modal-body button, .modal-footer input, .modal-footer button" + ); + } + if (focusTarget) { + afterTransition(() => focusTarget.focus()); } } },