Added option to disable search bar autofocus

DEV_GUIDELINES.md

@@ -0,0 +1,10 @@
+## Adding new config key
+
+1. Edit utils/init/initialConfig.json
+2. Edit client/src/interfaces/Config.ts
+3. Edit client/src/utility/templateObjects/configTemplate.ts
+
+If config value will be used in a form:
+
+4. Edit client/src/interfaces/Forms.ts
+5. Edit client/src/utility/templateObjects/settingsTemplate.ts

client/src/components/SearchBar/SearchBar.tsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { createNotification } from '../../store/actions';
 
 // Typescript
-import { NewNotification } from '../../interfaces';
+import { Config, GlobalState, NewNotification } from '../../interfaces';
 
 // CSS
 import classes from './SearchBar.module.css';
@@ -16,16 +16,20 @@ import { searchParser, urlParser, redirectUrl } from '../../utility';
 interface ComponentProps {
   createNotification: (notification: NewNotification) => void;
   setLocalSearch: (query: string) => void;
+  config: Config;
+  loading: boolean;
 }
 
 const SearchBar = (props: ComponentProps): JSX.Element => {
-  const { setLocalSearch, createNotification } = props;
+  const { setLocalSearch, createNotification, config, loading } = props;
 
   const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
 
   useEffect(() => {
+    if (!loading && !config.disableAutofocus) {
       inputRef.current.focus();
-  }, []);
+    }
+  }, [config]);
 
   const clearSearch = () => {
     inputRef.current.value = '';
@@ -78,4 +82,11 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
   );
 };
 
-export default connect(null, { createNotification })(SearchBar);
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    config: state.config.config,
+    loading: state.config.loading,
+  };
+};
+
+export default connect(mapStateToProps, { createNotification })(SearchBar);

client/src/components/Settings/SearchSettings/SearchSettings.tsx

@@ -121,6 +121,18 @@ const SearchSettings = (props: Props): JSX.Element => {
             <option value={0}>False</option>
           </select>
         </InputGroup>
+        <InputGroup>
+          <label htmlFor="disableAutofocus">Disable search bar autofocus</label>
+          <select
+            id="disableAutofocus"
+            name="disableAutofocus"
+            value={formData.disableAutofocus ? 1 : 0}
+            onChange={(e) => inputChangeHandler(e, { isBool: true })}
+          >
+            <option value={1}>True</option>
+            <option value={0}>False</option>
+          </select>
+        </InputGroup>
         <Button>Save changes</Button>
       </form>
 

client/src/interfaces/Config.ts

@@ -20,4 +20,5 @@ export interface Config {
   kubernetesApps: boolean;
   unpinStoppedApps: boolean;
   useAmericanDate: boolean;
+  disableAutofocus: boolean;
 }

client/src/interfaces/Forms.ts

@@ -9,6 +9,7 @@ export interface SearchForm {
   hideSearch: boolean;
   defaultSearchProvider: string;
   searchSameTab: boolean;
+  disableAutofocus: boolean;
 }
 
 export interface OtherSettingsForm {

client/src/utility/templateObjects/configTemplate.ts

@@ -22,4 +22,5 @@ export const configTemplate: Config = {
   kubernetesApps: false,
   unpinStoppedApps: false,
   useAmericanDate: false,
+  disableAutofocus: false,
 };

client/src/utility/templateObjects/settingsTemplate.ts

@@ -28,4 +28,5 @@ export const searchSettingsTemplate: SearchForm = {
   hideSearch: false,
   searchSameTab: false,
   defaultSearchProvider: 'l',
+  disableAutofocus: false,
 };

utils/init/initialConfig.json

@@ -18,5 +18,7 @@
   "dockerApps": false,
   "dockerHost": "localhost",
   "kubernetesApps": false,
-  "unpinStoppedApps": false
+  "unpinStoppedApps": false,
+  "useAmericanDate": false,
+  "disableAutofocus": false
 }