From 4734c9882cfeb5044c31114c6b9cb30f26e9f10c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 16 Jul 2019 22:35:11 +0100
Subject: [PATCH] chore(ui): don't focus input on mobile

Focusing input on a mobile browser pulls in the keyboard view, which takes half of the screen. Let user click it manually if needed
---
 ui/src/Components/NavBar/FilterInput/index.js |  3 ++-
 .../NavBar/FilterInput/index.test.js          | 25 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index 4150fd1a8..7b285880e 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -14,6 +14,7 @@ import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
 
 import { AlertStore, FormatBackendURI } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
+import { IsMobile } from "Common/Device";
 import { FilterInputLabel } from "Components/Labels/FilterInputLabel";
 import { AutosuggestTheme } from "./Constants";
 import { History } from "./History";
@@ -44,7 +45,7 @@ const FilterInput = observer(
     );
 
     componentDidMount() {
-      if (this.inputStore.ref !== null) {
+      if (this.inputStore.ref !== null && !IsMobile()) {
         this.inputStore.ref.input.focus();
       }
     }
diff --git a/ui/src/Components/NavBar/FilterInput/index.test.js b/ui/src/Components/NavBar/FilterInput/index.test.js
index 900e022ff..432c2c6df 100644
--- a/ui/src/Components/NavBar/FilterInput/index.test.js
+++ b/ui/src/Components/NavBar/FilterInput/index.test.js
@@ -10,8 +10,14 @@ import { FilterInput } from ".";
 
 let alertStore;
 let settingsStore;
+let originalInnerWidth;
+
+beforeAll(() => {
+  originalInnerWidth = global.window.innerWidth;
+});
 
 beforeEach(() => {
+  global.window.innerWidth = originalInnerWidth;
   alertStore = new AlertStore([]);
   settingsStore = new Settings();
 
@@ -20,6 +26,7 @@ beforeEach(() => {
 
 afterEach(() => {
   jest.restoreAllMocks();
+  global.window.innerWidth = originalInnerWidth;
 });
 
 const MountedInput = () => {
@@ -48,6 +55,24 @@ describe("<FilterInput />", () => {
     expect(instance.inputStore.ref).not.toBeNull();
   });
 
+  it("input gets focus by default on desktop", () => {
+    global.window.innerWidth = 768;
+    const tree = MountedInput();
+    const instance = tree.instance();
+    const inputSpy = jest.spyOn(instance.inputStore.ref.input, "focus");
+    instance.componentDidMount();
+    expect(inputSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("input doesn't get focus by default on mobile", () => {
+    global.window.innerWidth = 767;
+    const tree = MountedInput();
+    const instance = tree.instance();
+    const inputSpy = jest.spyOn(instance.inputStore.ref.input, "focus");
+    instance.componentDidMount();
+    expect(inputSpy).not.toHaveBeenCalled();
+  });
+
   it("onChange should modify inputStore.value", () => {
     fetch.mockResponseOnce(JSON.stringify([]));