diff --git a/web/src/index.js b/web/src/index.js
index 413d0c0..7c5efed 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -15,7 +15,8 @@
// along with this program. If not, see .
import { html, render, Component } from "../lib/htm/preact.js"
import { Spinner } from "./spinner.js"
-import { SearchBox } from "./search-box.js"
+import { shouldAutofocusSearchBar, shouldDisplayAutofocusSearchBar, SearchBox } from "./search-box.js"
+import { checkMobileSafari } from "./user-agent-detect.js"
import * as widgetAPI from "./widget-api.js"
import * as frequent from "./frequently-used.js"
@@ -35,7 +36,12 @@ const makeThumbnailURL = mxc => `${HOMESERVER_URL}/_matrix/media/r0/thumbnail/${
// We need to detect iOS webkit because it has a bug related to scrolling non-fixed divs
// This is also used to fix scrolling to sections on Element iOS
-const isMobileSafari = navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
+const isMobileSafari = checkMobileSafari()
+
+// We need to detect iOS webkit / Android because autofocusing a field does not open
+// the device keyboard by design, making the option obsolete
+const shouldAutofocusOption = shouldAutofocusSearchBar()
+const displayAutofocusOption = shouldDisplayAutofocusSearchBar()
const supportedThemes = ["light", "dark", "black"]
@@ -128,6 +134,8 @@ class App extends Component {
// End search
+ // Settings
+
setStickersPerRow(val) {
localStorage.mauStickersPerRow = val
document.documentElement.style.setProperty("--stickers-per-row", localStorage.mauStickersPerRow)
@@ -147,6 +155,12 @@ class App extends Component {
}
}
+ setAutofocusSearchBar(checked) {
+ localStorage.mauAutofocusSearchBar = checked
+ }
+
+ // End settings
+
reloadPacks() {
this.imageObserver.disconnect()
this.sectionObserver.disconnect()
@@ -330,6 +344,14 @@ const Settings = ({ app }) => html`
+ ${displayAutofocusOption ? html`
+ Autofocus search bar:
+ app.setAutofocusSearchBar(evt.target.checked)}
+ />
+
` : null}
`
diff --git a/web/src/search-box.js b/web/src/search-box.js
index e9d6ed2..ea50c77 100644
--- a/web/src/search-box.js
+++ b/web/src/search-box.js
@@ -14,11 +14,28 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see .
import { html, Component } from "../lib/htm/preact.js"
+import { checkMobileSafari, checkAndroid } from "./user-agent-detect.js"
+
+export function shouldDisplayAutofocusSearchBar() {
+ return !checkMobileSafari() && !checkAndroid()
+}
+
+export function shouldAutofocusSearchBar() {
+ return localStorage.mauAutofocusSearchBar === 'true' && shouldDisplayAutofocusSearchBar()
+}
+
+export function focusSearchBar() {
+ const inputInWebView = document.querySelector('.search-box input')
+ if (inputInWebView && shouldAutofocusSearchBar()) {
+ inputInWebView.focus()
+ }
+}
export class SearchBox extends Component {
constructor(props) {
super(props)
+ this.autofocus = shouldAutofocusSearchBar()
this.value = props.value
this.onSearch = props.onSearch
this.onReset = props.onReset
@@ -27,6 +44,10 @@ export class SearchBox extends Component {
this.clearSearch = this.clearSearch.bind(this)
}
+ componentDidMount() {
+ focusSearchBar()
+ }
+
componentWillReceiveProps(props) {
this.value = props.value
}
@@ -57,6 +78,7 @@ export class SearchBox extends Component {
placeholder="Find stickers …"
value=${this.value}
onKeyUp=${this.search}
+ autoFocus=${this.autofocus}
/>