fix: fixed bug when the user couldn't blur from input in the Settings…

… Drawer

src/components/molecules/FilePatternList/FilePatternList.tsx

@@ -1,7 +1,9 @@
 import {Button, Input, Tooltip} from 'antd';
-import {useEffect, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import styled from 'styled-components';
 
+import {useOnClickOutside} from '@hooks/useOnClickOutside';
+
 import {useFocus} from '@utils/hooks';
 
 import FilePatternListItem from './FilePatternListItem';
@@ -29,6 +31,12 @@ const FilePatternList = (props: FilePatternListProps) => {
   const [isAddingPattern, setIsAddingPattern] = useState<Boolean>(false);
   const [patternInput, setPatternInput] = useState<string>('');
   const [inputRef, focusInput] = useFocus<Input>();
+  const filePatternInputRef = useRef<any>();
+
+  useOnClickOutside(filePatternInputRef, () => {
+    setIsAddingPattern(false);
+    setPatternInput('');
+  });
 
   const isPatternUnique = (patternStr: string) => {
     return !value.includes(patternStr);
@@ -86,7 +94,7 @@ const FilePatternList = (props: FilePatternListProps) => {
         ))}
       </StyledUl>
       {isAddingPattern ? (
-        <>
+        <div ref={filePatternInputRef}>
           <Input
             ref={inputRef}
             defaultValue={patternInput}
@@ -95,7 +103,7 @@ const FilePatternList = (props: FilePatternListProps) => {
           />
           <StyledButton onClick={addPattern}>OK</StyledButton>
           <StyledButton onClick={onClickCancel}>Cancel</StyledButton>
-        </>
+        </div>
       ) : (
         <Tooltip title={tooltip}>
           <Button onClick={() => setIsAddingPattern(true)}>Add Pattern</Button>

src/components/organisms/SettingsDrawer/SettingsDrawer.tsx

@@ -32,6 +32,8 @@ import {
   KustomizeCommandTooltip,
 } from '@constants/tooltips';
 
+import {useFocus} from '@utils/hooks';
+
 const StyledDiv = styled.div`
   margin-bottom: 20px;
 `;
@@ -68,6 +70,7 @@ const SettingsDrawer = () => {
   const [currentFolderReadsMaxDepth, setCurrentFolderReadsMaxDepth] = useState<number>(5);
   const [currentKubeConfig, setCurrentKubeConfig] = useState<string>('');
   const fileInput = useRef<HTMLInputElement>(null);
+  const [inputRef, focusInput] = useFocus<Input>();
 
   const isEditingDisabled = uiState.isClusterDiffVisible || isInClusterMode;
 
@@ -184,7 +187,13 @@ const SettingsDrawer = () => {
       <StyledDiv>
         <StyledSpan>KUBECONFIG</StyledSpan>
         <Tooltip title={KubeconfigPathTooltip}>
-          <Input value={currentKubeConfig} onChange={onUpdateKubeconfig} disabled={isEditingDisabled} />
+          <Input
+            ref={inputRef}
+            value={currentKubeConfig}
+            onChange={onUpdateKubeconfig}
+            disabled={isEditingDisabled}
+            onClick={() => focusInput()}
+          />
         </Tooltip>
         <StyledButton onClick={openFileSelect} disabled={isEditingDisabled}>
           Browse

src/hooks/useOnClickOutside.ts

@@ -0,0 +1,25 @@
+import {RefObject, useEffect} from 'react';
+
+type AnyEvent = MouseEvent | TouchEvent;
+
+export const useOnClickOutside = (ref: RefObject<any>, touchEndCb: (event: AnyEvent) => void): void => {
+  useEffect(() => {
+    const onTouchEndListener = (event: AnyEvent) => {
+      const el = ref?.current;
+
+      if (!el || el.contains(event.target as Node)) {
+        return;
+      }
+
+      touchEndCb(event);
+    };
+
+    document.addEventListener(`mouseup`, onTouchEndListener);
+    document.addEventListener(`touchend`, onTouchEndListener);
+
+    return () => {
+      document.removeEventListener(`mouseup`, onTouchEndListener);
+      document.removeEventListener(`touchend`, onTouchEndListener);
+    };
+  }, [ref, touchEndCb]);
+};

src/utils/hooks.ts

@@ -1,5 +1,7 @@
-import React, {useState, useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
+
 import {Size} from '@models/window';
+
 import {FormInstance} from 'antd/lib/form';
 
 export function useFocus<T>(): [React.RefObject<T>, () => void] {