Merge pull request #833 from prymitive/no-focus-mobile

chore(ui): don't focus input on mobile

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();
       }
     }

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([]));