properly handle mobile devices for autofocus

web/src/search-box.js

@@ -14,11 +14,15 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { html, Component } from "../lib/htm/preact.js"
+import { checkMobileSafari, checkAndroid } from "./user-agent-detect.js"
 
-export function shouldAutofocusSearchBar() {
-  return localStorage.mauAutofocusSearchBar === 'true'
+export function shouldDisplayAutofocusSearchBar() {
+  return !checkMobileSafari() && !checkAndroid()
 }
 
+export function shouldAutofocusSearchBar() {
+	return localStorage.mauAutofocusSearchBar === 'true' && shouldDisplayAutofocusSearchBar()
+}
 
 export class SearchBox extends Component {
 	constructor(props) {
@@ -33,6 +37,14 @@ export class SearchBox extends Component {
 		this.clearSearch = this.clearSearch.bind(this)
 	}
 
+	componentDidMount() {
+		// hack required for firefox
+		const inputInWebView = document.querySelector('.search-box input')
+		if (inputInWebView && this.autofocus) {
+			inputInWebView.focus()
+		}
+	}
+
 	componentWillReceiveProps(props) {
 		this.value = props.value
 	}
@@ -63,7 +75,7 @@ export class SearchBox extends Component {
 					placeholder="Find stickers …"
 					value=${this.value}
 					onKeyUp=${this.search}
-					autofocus=${this.autofocus}
+					autoFocus=${this.autofocus}
 				/>
 				<div class=${className} title=${title} onClick=${onClick}>
 					<span class="icon ${iconToDisplay}" />