Set an error if you try to set a number to empty

lib/components/src/controls/Array.tsx

@@ -32,11 +32,11 @@ export const ArrayControl: FC<ArrayProps> = ({
     [onChange]
   );
 
-  const [forceVisible, onSetForceVisible] = useState(false);
+  const [forceVisible, setForceVisible] = useState(false);
   const onForceVisible = useCallback(() => {
     onChange([]);
-    onSetForceVisible(true);
-  }, [onSetForceVisible]);
+    setForceVisible(true);
+  }, [setForceVisible]);
   if (value === undefined) {
     return <Form.Button onClick={onForceVisible}>Set array</Form.Button>;
   }

lib/components/src/controls/Number.tsx

@@ -27,16 +27,30 @@ export const NumberControl: FC<NumberProps> = ({
   onBlur,
   onFocus,
 }) => {
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange(parse(event.target.value));
-  };
+  const [inputValue, setInputValue] = useState(typeof value === 'number' ? value : '');
+  const [forceVisible, setForceVisible] = useState(false);
+  const [parseError, setParseError] = useState(false);
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setInputValue(event.target.value);
+
+      const result = parseFloat(event.target.value);
+      if (Number.isNaN(result)) {
+        setParseError(true);
+      } else {
+        onChange(result);
+        setParseError(false);
+      }
+    },
+    [onChange, setParseError]
+  );
 
-  const [forceVisible, onSetForceVisible] = useState(false);
   const onForceVisible = useCallback(() => {
     onChange(0);
-    onSetForceVisible(true);
-  }, [onSetForceVisible]);
-  if (value === undefined) {
+    setForceVisible(true);
+  }, [setForceVisible]);
+  if (!forceVisible && value === undefined) {
     return <Form.Button onClick={onForceVisible}>Set number</Form.Button>;
   }
 
@@ -47,7 +61,8 @@ export const NumberControl: FC<NumberProps> = ({
         onChange={handleChange}
         size="flex"
         placeholder="Edit number..."
-        value={value}
+        value={inputValue}
+        valid={parseError ? 'error' : null}
         autoFocus={forceVisible}
         {...{ name, min, max, step, onFocus, onBlur }}
       />

lib/components/src/controls/Object.tsx

@@ -248,11 +248,11 @@ export const ObjectControl: React.FC<ObjectProps> = ({ name, value, onChange })
     [onChange]
   );
 
-  const [forceVisible, onSetForceVisible] = useState(false);
+  const [forceVisible, setForceVisible] = useState(false);
   const onForceVisible = useCallback(() => {
     onChange({});
-    onSetForceVisible(true);
-  }, [onSetForceVisible]);
+    setForceVisible(true);
+  }, [setForceVisible]);
   if (!hasData) {
     return <Form.Button onClick={onForceVisible}>Set object</Form.Button>;
   }

lib/components/src/controls/Text.tsx

@@ -15,11 +15,11 @@ export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onB
     onChange(event.target.value);
   };
 
-  const [forceVisible, onSetForceVisible] = useState(false);
+  const [forceVisible, setForceVisible] = useState(false);
   const onForceVisible = useCallback(() => {
     onChange('');
-    onSetForceVisible(true);
-  }, [onSetForceVisible]);
+    setForceVisible(true);
+  }, [setForceVisible]);
   if (value === undefined) {
     return <Form.Button onClick={onForceVisible}>Set string</Form.Button>;
   }