commit 862ccda59b711557376aab66abf8280cadb25e02
author Virushade <70288012+GWphua@users.noreply.github.com> Wed Aug 28 11:28:43 2024 +0800
committer GitHub <noreply@github.com> Tue Aug 27 20:28:43 2024 -0700
tree 988a69658a518a2526720524fb04d10f562213aa
parent e562dd3ac6d4974d17c1816da7e5f4d6c7ecb309

Disable automatic search refresh every for keystroke (#16963)

* Disable refreshing page everytime keystroke is detected

* Lengthen input debounce time to 1s

* Run Prettier to pass stylecheck

web-console/src/react-table/react-table-inputs.tsx

diff --git a/web-console/src/react-table/react-table-inputs.tsx b/web-console/src/react-table/react-table-inputs.tsx
index 06bacd1..2d02cb7 100644
--- a/web-console/src/react-table/react-table-inputs.tsx
+++ b/web-console/src/react-table/react-table-inputs.tsx
@@ -19,7 +19,7 @@
 import { Button, HTMLSelect, Icon, InputGroup, Menu, MenuItem, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { Column, ReactTableFunction } from 'react-table';
 
 import {
@@ -39,8 +39,10 @@
 }
 
 export function GenericFilterInput({ column, filter, onChange, key }: FilterRendererProps) {
+  const INPUT_DEBOUNCE_TIME_IN_MILLISECONDS = 1000;
   const [menuOpen, setMenuOpen] = useState(false);
   const [focusedText, setFocusedText] = useState<string | undefined>();
+  const [debouncedValue, setDebouncedValue] = useState<string | undefined>();
 
   const enableComparisons = String(column.headerClassName).includes('enable-comparisons');
 
@@ -49,6 +51,19 @@
     needle: '',
   };
 
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      if (focusedText !== undefined && focusedText !== debouncedValue) {
+        onChange(combineModeAndNeedle(mode, focusedText));
+        setDebouncedValue(focusedText);
+      }
+    }, INPUT_DEBOUNCE_TIME_IN_MILLISECONDS);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [focusedText, debouncedValue, mode, onChange]);
+
   return (
     <InputGroup
       className={classNames('generic-filter-input', {
@@ -79,15 +94,17 @@
         </Popover>
       }
       value={focusedText ?? needle}
-      onChange={e => {
-        const enteredText = e.target.value;
-        setFocusedText(enteredText);
-        onChange(combineModeAndNeedle(mode, enteredText));
+      onChange={e => setFocusedText(e.target.value)}
+      onKeyDown={e => {
+        if (e.key === 'Enter') {
+          const inputValue = (e.target as HTMLInputElement).value;
+          setDebouncedValue(undefined); // Reset debounce to avoid duplicate triggers
+          onChange(combineModeAndNeedle(mode, inputValue));
+        }
       }}
       rightElement={
         filter ? <Button icon={IconNames.CROSS} minimal onClick={() => onChange('')} /> : undefined
       }
-      onFocus={() => setFocusedText(needle)}
       onBlur={e => {
         setFocusedText(undefined);
         if (filter && !e.target.value) onChange('');