Show visual feedback if number is invalid

Author: jcheng5

js/dataframe/filter-numeric.tsx

@@ -54,6 +54,9 @@ const FilterNumericImpl: React.FC<FilterNumericImplProps> = (props) => {
   const [min, max] = props.value;
   const { editing, onFocus } = props;
 
+  const minInputRef = useRef<HTMLInputElement>(null);
+  const maxInputRef = useRef<HTMLInputElement>(null);
+
   return (
     <div
       onBlur={(e) => {
@@ -69,24 +72,36 @@ const FilterNumericImpl: React.FC<FilterNumericImplProps> = (props) => {
       }}
     >
       <input
+        ref={minInputRef}
         className="form-control form-control-sm"
         style={{ flex: "1 1 0", width: "0" }}
         type="number"
         placeholder={createPlaceholder(editing, "Min", props.range[0])}
         value={min}
-        onChange={(e) =>
-          props.onValueChange([coerceToNum(e.target.value), max])
-        }
+        onChange={(e) => {
+          const value = coerceToNum(e.target.value);
+          minInputRef.current.classList.toggle(
+            "is-invalid",
+            !e.target.checkValidity()
+          );
+          props.onValueChange([value, max]);
+        }}
       />
       <input
+        ref={maxInputRef}
         className="form-control form-control-sm"
         style={{ flex: "1 1 0", width: "0" }}
         type="number"
         placeholder={createPlaceholder(editing, "Max", props.range[1])}
         value={max}
-        onChange={(e) =>
-          props.onValueChange([min, coerceToNum(e.target.value)])
-        }
+        onChange={(e) => {
+          const value = coerceToNum(e.target.value);
+          minInputRef.current.classList.toggle(
+            "is-invalid",
+            !e.target.checkValidity()
+          );
+          props.onValueChange([min, value]);
+        }}
       />
     </div>
   );