FIX: Better focus support for modals (#13147)
This commit is contained in:
parent
452ea7e32e
commit
681a129ec0
|
@ -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"
|
||||
)
|
||||
);
|
||||
},
|
||||
|
|
|
@ -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());
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue