From 324600cdbb7eb867883e44f72f5d9ccee75b9a1a Mon Sep 17 00:00:00 2001 From: Jeffrin Jojo <135723871+Jeffrin2005@users.noreply.github.com> Date: Sun, 23 Feb 2025 09:37:43 +0530 Subject: [PATCH 1/9] sync search field --- src/components/Common/SearchByMultipleFields.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx index 7cd3550b3ba..78fc110b9fa 100644 --- a/src/components/Common/SearchByMultipleFields.tsx +++ b/src/components/Common/SearchByMultipleFields.tsx @@ -177,6 +177,17 @@ const SearchByMultipleFields: React.FC = ({ return () => document.removeEventListener("keydown", handleKeyDown); }, [focusedIndex, open, handleOptionChange, options]); + useEffect(() => { + if (inputRef.current) { + inputRef.current.focus(); + } + }, [selectedOptionIndex]); + + useEffect(() => { + if (selectedOption.value !== searchValue) { + setSearchValue(selectedOption.value || ""); + } + }, [selectedOption.value]); useEffect(() => { if (selectedOption.value !== searchValue) { onSearch(selectedOption.key, searchValue); From cca0997173bfca7033d6fee11cca8eb92f4c9334 Mon Sep 17 00:00:00 2001 From: Jeffrin Jojo <135723871+Jeffrin2005@users.noreply.github.com> Date: Sun, 23 Feb 2025 10:50:21 +0530 Subject: [PATCH 2/9] updated browswer backspace --- .../Common/SearchByMultipleFields.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx index 78fc110b9fa..e8930aec6f2 100644 --- a/src/components/Common/SearchByMultipleFields.tsx +++ b/src/components/Common/SearchByMultipleFields.tsx @@ -155,6 +155,10 @@ const SearchByMultipleFields: React.FC = ({ } } + if (e.key === "Backspace" && searchValue.length === 0) { + e.preventDefault(); + } + if (open) { if (e.key === "ArrowDown") { setFocusedIndex((prevIndex) => @@ -175,7 +179,7 @@ const SearchByMultipleFields: React.FC = ({ document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); - }, [focusedIndex, open, handleOptionChange, options]); + }, [focusedIndex, open, handleOptionChange, options, searchValue]); useEffect(() => { if (inputRef.current) { @@ -188,12 +192,19 @@ const SearchByMultipleFields: React.FC = ({ setSearchValue(selectedOption.value || ""); } }, [selectedOption.value]); + useEffect(() => { if (selectedOption.value !== searchValue) { onSearch(selectedOption.key, searchValue); } }, [searchValue]); + useEffect(() => { + if (autoFocus) { + inputRef.current?.focus(); + } + }, [autoFocus, open, selectedOptionIndex]); + const renderSearchInput = useMemo(() => { switch (selectedOption.type) { case "phone": @@ -231,12 +242,6 @@ const SearchByMultipleFields: React.FC = ({ } }, [selectedOption, searchValue, t, inputClassName, open]); - useEffect(() => { - if (autoFocus) { - inputRef.current?.focus(); - } - }, [autoFocus, open, selectedOptionIndex]); - return (
Date: Sun, 23 Feb 2025 11:12:56 +0530 Subject: [PATCH 3/9] updated --- src/components/Common/SearchByMultipleFields.tsx | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx index e8930aec6f2..4c691d4bce3 100644 --- a/src/components/Common/SearchByMultipleFields.tsx +++ b/src/components/Common/SearchByMultipleFields.tsx @@ -47,7 +47,6 @@ interface SearchByMultipleFieldsProps { clearSearch?: { value: boolean; params?: string[] }; enableOptionButtons?: boolean; onFieldChange?: (options: SearchOption) => void; - autoFocus?: boolean; } const KeyboardShortcutHint = ({ open }: { open: boolean }) => { @@ -91,7 +90,6 @@ const SearchByMultipleFields: React.FC = ({ clearSearch, onFieldChange, enableOptionButtons = true, - autoFocus = false, }) => { const { t } = useTranslation(); const [selectedOptionIndex, setSelectedOptionIndex] = @@ -155,10 +153,6 @@ const SearchByMultipleFields: React.FC = ({ } } - if (e.key === "Backspace" && searchValue.length === 0) { - e.preventDefault(); - } - if (open) { if (e.key === "ArrowDown") { setFocusedIndex((prevIndex) => @@ -179,7 +173,7 @@ const SearchByMultipleFields: React.FC = ({ document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); - }, [focusedIndex, open, handleOptionChange, options, searchValue]); + }, [focusedIndex, open, handleOptionChange, options]); useEffect(() => { if (inputRef.current) { @@ -199,12 +193,6 @@ const SearchByMultipleFields: React.FC = ({ } }, [searchValue]); - useEffect(() => { - if (autoFocus) { - inputRef.current?.focus(); - } - }, [autoFocus, open, selectedOptionIndex]); - const renderSearchInput = useMemo(() => { switch (selectedOption.type) { case "phone": From a2a9bd09111e84d881969d3e7792bf72add7115c Mon Sep 17 00:00:00 2001 From: Jeffrin Jojo <135723871+Jeffrin2005@users.noreply.github.com> Date: Sun, 23 Feb 2025 11:19:08 +0530 Subject: [PATCH 4/9] new update --- src/components/Common/SearchByMultipleFields.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx index 4c691d4bce3..0bad4b862a0 100644 --- a/src/components/Common/SearchByMultipleFields.tsx +++ b/src/components/Common/SearchByMultipleFields.tsx @@ -47,6 +47,7 @@ interface SearchByMultipleFieldsProps { clearSearch?: { value: boolean; params?: string[] }; enableOptionButtons?: boolean; onFieldChange?: (options: SearchOption) => void; + autoFocus?: boolean; } const KeyboardShortcutHint = ({ open }: { open: boolean }) => { @@ -90,6 +91,7 @@ const SearchByMultipleFields: React.FC = ({ clearSearch, onFieldChange, enableOptionButtons = true, + autoFocus = false, }) => { const { t } = useTranslation(); const [selectedOptionIndex, setSelectedOptionIndex] = @@ -176,10 +178,10 @@ const SearchByMultipleFields: React.FC = ({ }, [focusedIndex, open, handleOptionChange, options]); useEffect(() => { - if (inputRef.current) { - inputRef.current.focus(); + if (autoFocus) { + inputRef.current?.focus(); } - }, [selectedOptionIndex]); + }, [autoFocus, open, selectedOptionIndex]); useEffect(() => { if (selectedOption.value !== searchValue) { From 267b5c7f1528368ce78a0e16ab7831f7f08fedc2 Mon Sep 17 00:00:00 2001 From: Jeffrin Jojo <135723871+Jeffrin2005@users.noreply.github.com> Date: Sun, 23 Feb 2025 11:24:33 +0530 Subject: [PATCH 5/9] test --- src/components/Common/SearchByMultipleFields.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx index 0bad4b862a0..4c691d4bce3 100644 --- a/src/components/Common/SearchByMultipleFields.tsx +++ b/src/components/Common/SearchByMultipleFields.tsx @@ -47,7 +47,6 @@ interface SearchByMultipleFieldsProps { clearSearch?: { value: boolean; params?: string[] }; enableOptionButtons?: boolean; onFieldChange?: (options: SearchOption) => void; - autoFocus?: boolean; } const KeyboardShortcutHint = ({ open }: { open: boolean }) => { @@ -91,7 +90,6 @@ const SearchByMultipleFields: React.FC = ({ clearSearch, onFieldChange, enableOptionButtons = true, - autoFocus = false, }) => { const { t } = useTranslation(); const [selectedOptionIndex, setSelectedOptionIndex] = @@ -178,10 +176,10 @@ const SearchByMultipleFields: React.FC = ({ }, [focusedIndex, open, handleOptionChange, options]); useEffect(() => { - if (autoFocus) { - inputRef.current?.focus(); + if (inputRef.current) { + inputRef.current.focus(); } - }, [autoFocus, open, selectedOptionIndex]); + }, [selectedOptionIndex]); useEffect(() => { if (selectedOption.value !== searchValue) { From 7facf7a98e4f889d26e9054c1c5b5d871d65b811 Mon Sep 17 00:00:00 2001 From: Jeffrin Jojo <135723871+Jeffrin2005@users.noreply.github.com> Date: Sun, 23 Feb 2025 11:57:18 +0530 Subject: [PATCH 6/9] test 2 --- src/components/Common/SearchByMultipleFields.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx index 4c691d4bce3..12b31965593 100644 --- a/src/components/Common/SearchByMultipleFields.tsx +++ b/src/components/Common/SearchByMultipleFields.tsx @@ -47,6 +47,7 @@ interface SearchByMultipleFieldsProps { clearSearch?: { value: boolean; params?: string[] }; enableOptionButtons?: boolean; onFieldChange?: (options: SearchOption) => void; + autoFocus?: boolean; } const KeyboardShortcutHint = ({ open }: { open: boolean }) => { @@ -90,6 +91,7 @@ const SearchByMultipleFields: React.FC = ({ clearSearch, onFieldChange, enableOptionButtons = true, + autoFocus = false, }) => { const { t } = useTranslation(); const [selectedOptionIndex, setSelectedOptionIndex] = @@ -152,7 +154,9 @@ const SearchByMultipleFields: React.FC = ({ setSearchValue(""); } } - + if (e.key === "Backspace" && searchValue.length === 0) { + e.preventDefault(); + } if (open) { if (e.key === "ArrowDown") { setFocusedIndex((prevIndex) => @@ -173,14 +177,19 @@ const SearchByMultipleFields: React.FC = ({ document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); - }, [focusedIndex, open, handleOptionChange, options]); + }, [focusedIndex, open, handleOptionChange, options, searchValue]); + + useEffect(() => { + if (autoFocus) { + inputRef.current?.focus(); + } + }, [autoFocus, open, selectedOptionIndex]); useEffect(() => { if (inputRef.current) { inputRef.current.focus(); } }, [selectedOptionIndex]); - useEffect(() => { if (selectedOption.value !== searchValue) { setSearchValue(selectedOption.value || ""); From fae10e339180e77b34224d0b637704156aded397 Mon Sep 17 00:00:00 2001 From: Jeffrin Jojo <135723871+Jeffrin2005@users.noreply.github.com> Date: Tue, 25 Feb 2025 18:32:34 +0530 Subject: [PATCH 7/9] removing unnessary changes --- src/components/Common/SearchByMultipleFields.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx index 12b31965593..1d897fbdf96 100644 --- a/src/components/Common/SearchByMultipleFields.tsx +++ b/src/components/Common/SearchByMultipleFields.tsx @@ -185,11 +185,6 @@ const SearchByMultipleFields: React.FC = ({ } }, [autoFocus, open, selectedOptionIndex]); - useEffect(() => { - if (inputRef.current) { - inputRef.current.focus(); - } - }, [selectedOptionIndex]); useEffect(() => { if (selectedOption.value !== searchValue) { setSearchValue(selectedOption.value || ""); From 332ce75b7846b42ed912eb990abea976aa4e9a5d Mon Sep 17 00:00:00 2001 From: Jeffrin Jojo <135723871+Jeffrin2005@users.noreply.github.com> Date: Wed, 26 Feb 2025 18:19:29 +0530 Subject: [PATCH 8/9] moved to top --- src/components/Common/SearchByMultipleFields.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx index 1d897fbdf96..47372deda5f 100644 --- a/src/components/Common/SearchByMultipleFields.tsx +++ b/src/components/Common/SearchByMultipleFields.tsx @@ -137,6 +137,12 @@ const SearchByMultipleFields: React.FC = ({ } }, [open]); + useEffect(() => { + if (autoFocus) { + inputRef.current?.focus(); + } + }, [autoFocus, open, selectedOptionIndex]); + useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "k" && (e.metaKey || e.ctrlKey)) { @@ -154,9 +160,11 @@ const SearchByMultipleFields: React.FC = ({ setSearchValue(""); } } + if (e.key === "Backspace" && searchValue.length === 0) { e.preventDefault(); } + if (open) { if (e.key === "ArrowDown") { setFocusedIndex((prevIndex) => @@ -179,12 +187,6 @@ const SearchByMultipleFields: React.FC = ({ return () => document.removeEventListener("keydown", handleKeyDown); }, [focusedIndex, open, handleOptionChange, options, searchValue]); - useEffect(() => { - if (autoFocus) { - inputRef.current?.focus(); - } - }, [autoFocus, open, selectedOptionIndex]); - useEffect(() => { if (selectedOption.value !== searchValue) { setSearchValue(selectedOption.value || ""); From 110cf91c9d8de5d2b1d85094c82e30a2795ebe0b Mon Sep 17 00:00:00 2001 From: Jeffrin Jojo <135723871+Jeffrin2005@users.noreply.github.com> Date: Thu, 27 Feb 2025 17:32:28 +0530 Subject: [PATCH 9/9] final- moved useeffect --- src/components/Common/SearchByMultipleFields.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx index 47372deda5f..d850a9f8021 100644 --- a/src/components/Common/SearchByMultipleFields.tsx +++ b/src/components/Common/SearchByMultipleFields.tsx @@ -137,12 +137,6 @@ const SearchByMultipleFields: React.FC = ({ } }, [open]); - useEffect(() => { - if (autoFocus) { - inputRef.current?.focus(); - } - }, [autoFocus, open, selectedOptionIndex]); - useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "k" && (e.metaKey || e.ctrlKey)) { @@ -235,7 +229,11 @@ const SearchByMultipleFields: React.FC = ({ ); } }, [selectedOption, searchValue, t, inputClassName, open]); - + useEffect(() => { + if (autoFocus) { + inputRef.current?.focus(); + } + }, [autoFocus, open, selectedOptionIndex]); return (