github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-27 00:23:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Compact tag picker input not focused in iOS (#22922) (#23090)

Browse Source 
Should fix an iOS regression in f5e8e73. iOS does not pull up the keyboard if the `.focus()` call is delayed by a rendering timeout or an asynchronous ajax call. This PR adds earlier `.focus()` calls if the input element is present.
This commit is contained in:
Penar Musaraj 2023-08-18 11:23:06 -04:00 committed by GitHub
parent 14f6dcb4d0
commit bf3e908f66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/assets/javascripts/select-kit/addon/components/select-kit.js
View File

@ -1004,6 +1004,10 @@ export default Component.extend(
this.selectKit.options.filterable || this.selectKit.options.allowAny, this.selectKit.options.filterable || this.selectKit.options.allowAny,
}); });
if (this.selectKit.options.useHeaderFilter) {
this._focusFilterInput();
}
this.triggerSearch(); this.triggerSearch();
this._safeAfterRender(() => { this._safeAfterRender(() => {
@ -1044,14 +1048,16 @@ export default Component.extend(
return; return;
} }
// setting focus as early as possible is best for iOS
// because render/promise delays may cause keyboard not to show
if (!forceHeader) {
this._focusFilterInput();
}
this._safeAfterRender(() => { this._safeAfterRender(() => {
const input = this.getFilterInput(); const input = this.getFilterInput();
if (!forceHeader && input) { if (!forceHeader && input) {
input.focus({ preventScroll: true }); this._focusFilterInput();
if (typeof input.selectionStart === "number") {
input.selectionStart = input.selectionEnd = input.value.length;
}
} else if (!this.selectKit.options.preventHeaderFocus) { } else if (!this.selectKit.options.preventHeaderFocus) {
const headerContainer = this.getHeader(); const headerContainer = this.getHeader();
headerContainer && headerContainer.focus({ preventScroll: true }); headerContainer && headerContainer.focus({ preventScroll: true });
@ -1059,6 +1065,18 @@ export default Component.extend(
}); });
}, },
_focusFilterInput() {
const input = this.getFilterInput();
if (input && document.activeElement !== input) {
input.focus({ preventScroll: true });
if (typeof input.selectionStart === "number") {
input.selectionStart = input.selectionEnd = input.value.length;
}
}
},
getFilterInput() { getFilterInput() {
return document.querySelector(`#${this.selectKit.uniqueID}-filter input`); return document.querySelector(`#${this.selectKit.uniqueID}-filter input`);
}, },