Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/app/components/d-modal-body.js
View File

@ -4,6 +4,7 @@ export default Component.extend({
classNames: ["modal-body"], classNames: ["modal-body"],
fixed: false, fixed: false,
dismissable: true, dismissable: true,
autoFocus: true,
didInsertElement() { didInsertElement() {
this._super(...arguments); this._super(...arguments);
@ -28,14 +29,6 @@ export default Component.extend({
}, },
_afterFirstRender() { _afterFirstRender() {
if (
!this.site.mobileView &&
this.autoFocus !== "false" &&
this.element.querySelector("input")
) {
this.element.querySelector("input").focus();
}
const maxHeight = this.maxHeight; const maxHeight = this.maxHeight;
if (maxHeight) { if (maxHeight) {
const maxHeightFloat = parseFloat(maxHeight) / 100.0; const maxHeightFloat = parseFloat(maxHeight) / 100.0;
@ -57,7 +50,8 @@ export default Component.extend({
"subtitle", "subtitle",
"rawSubtitle", "rawSubtitle",
"dismissable", "dismissable",
"headerClass" "headerClass",
"autoFocus"
) )
); );
}, },

13
app/assets/javascripts/discourse/app/components/d-modal.js
View File

@ -132,13 +132,18 @@ export default Component.extend({
this.set("headerClass", data.headerClass || null); this.set("headerClass", data.headerClass || null);
if (this.element) { if (this.element && data.autoFocus) {
const autofocusInputs = this.element.querySelectorAll( let focusTarget = this.element.querySelector(
".modal-body input[autofocus]" ".modal-body input[autofocus]"
); );
if (autofocusInputs.length) { if (!focusTarget && !this.site.mobileView) {
afterTransition(() => autofocusInputs[0].focus()); focusTarget = this.element.querySelector(
".modal-body input, .modal-body button, .modal-footer input, .modal-footer button"
);
}
if (focusTarget) {
afterTransition(() => focusTarget.focus());
} }
} }
}, },