diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js index a2c617320bb..e1fc205f835 100644 --- a/app/assets/javascripts/select-kit/addon/components/select-kit.js +++ b/app/assets/javascripts/select-kit/addon/components/select-kit.js @@ -1004,6 +1004,10 @@ export default Component.extend( this.selectKit.options.filterable || this.selectKit.options.allowAny, }); + if (this.selectKit.options.useHeaderFilter) { + this._focusFilterInput(); + } + this.triggerSearch(); this._safeAfterRender(() => { @@ -1044,14 +1048,16 @@ export default Component.extend( 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(() => { const input = this.getFilterInput(); if (!forceHeader && input) { - input.focus({ preventScroll: true }); - - if (typeof input.selectionStart === "number") { - input.selectionStart = input.selectionEnd = input.value.length; - } + this._focusFilterInput(); } else if (!this.selectKit.options.preventHeaderFocus) { const headerContainer = this.getHeader(); 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() { return document.querySelector(`#${this.selectKit.uniqueID}-filter input`); },