Skip to content

Commit 66a0590

Browse files
karangattuclaude
andcommitted
Improve numeric filter input handling
Adds local state for min and max input values to better handle user typing and updates input fields when prop values change. This prevents issues with controlled input fields and ensures a smoother user experience. Co-authored-by: Claude <[email protected]>
1 parent 37e2541 commit 66a0590

File tree

3 files changed

+28
-11
lines changed

3 files changed

+28
-11
lines changed

js/data-frame/filter-numeric.tsx

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,19 @@ const FilterNumericImpl: React.FC<FilterNumericImplProps> = (props) => {
5757
const minInputRef = useRef<HTMLInputElement>(null);
5858
const maxInputRef = useRef<HTMLInputElement>(null);
5959

60+
// Local state to track the string value while typing
61+
const [minInputValue, setMinInputValue] = useState<string>("");
62+
const [maxInputValue, setMaxInputValue] = useState<string>("");
63+
64+
// Update local string state when prop values change
65+
useEffect(() => {
66+
setMinInputValue(min !== undefined ? String(min) : "");
67+
}, [min]);
68+
69+
useEffect(() => {
70+
setMaxInputValue(max !== undefined ? String(max) : "");
71+
}, [max]);
72+
6073
return (
6174
<div
6275
onBlur={(e) => {
@@ -79,12 +92,14 @@ const FilterNumericImpl: React.FC<FilterNumericImplProps> = (props) => {
7992
style={{ flex: "1 1 0", width: "0" }}
8093
type="number"
8194
placeholder={createPlaceholder(editing, "Min", rangeMin)}
82-
value={min ?? ""}
95+
value={minInputValue}
8396
// min={rangeMin}
8497
// max={rangeMax}
8598
step="any"
8699
onChange={(e) => {
87-
const value = coerceToNum(e.target.value);
100+
const inputValue = e.target.value;
101+
setMinInputValue(inputValue);
102+
const value = coerceToNum(inputValue);
88103
if (!minInputRef.current) return;
89104
minInputRef.current.classList.toggle(
90105
"is-invalid",
@@ -101,12 +116,14 @@ const FilterNumericImpl: React.FC<FilterNumericImplProps> = (props) => {
101116
style={{ flex: "1 1 0", width: "0" }}
102117
type="number"
103118
placeholder={createPlaceholder(editing, "Max", rangeMax)}
104-
value={max ?? ""}
119+
value={maxInputValue}
105120
// min={rangeMin}
106121
// max={rangeMax}
107122
step="any"
108123
onChange={(e) => {
109-
const value = coerceToNum(e.target.value);
124+
const inputValue = e.target.value;
125+
setMaxInputValue(inputValue);
126+
const value = coerceToNum(inputValue);
110127
if (!maxInputRef.current) return;
111128
maxInputRef.current.classList.toggle(
112129
"is-invalid",

0 commit comments

Comments
 (0)