This is an automated email from the ASF dual-hosted git repository.
vogievetsky pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/druid.git
The following commit(s) were added to refs/heads/master by this push:
new 862ccda59b7 Disable automatic search refresh every for keystroke
(#16963)
862ccda59b7 is described below
commit 862ccda59b711557376aab66abf8280cadb25e02
Author: Virushade <[email protected]>
AuthorDate: Wed Aug 28 11:28:43 2024 +0800
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 | 29 +++++++++++++++++-----
1 file changed, 23 insertions(+), 6 deletions(-)
diff --git a/web-console/src/react-table/react-table-inputs.tsx
b/web-console/src/react-table/react-table-inputs.tsx
index 06bacd1a06d..2d02cb71b78 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 @@ interface FilterRendererProps {
}
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 @@ export function GenericFilterInput({ column, filter,
onChange, key }: FilterRend
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 @@ export function GenericFilterInput({ column, filter,
onChange, key }: FilterRend
</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('');
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
