FIX: Better focus support for modals (#13147)

This commit is contained in:
Robin Ward 2021-05-25 16:33:46 -04:00 committed by GitHub
parent 452ea7e32e
commit 681a129ec0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 13 deletions

View File

@ -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"
)
);
},

View File

@ -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());
}
}
},