Fix optional/required slider logic

src/antd/InputNumber.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from "react"
 import { ControlProps, RendererProps } from "@jsonforms/core"
 import { InputNumber as AntdInputNumber } from "antd"
-import { coerceToInteger, coerceToNumber, decimalToPercentage } from "../controls/utils"
+import { coerceToInteger, coerceToNumber } from "../controls/utils"
 
 type InputNumber = ReactElement<typeof AntdInputNumber>
 type AntdInputNumberProps = React.ComponentProps<typeof AntdInputNumber>
@@ -11,7 +11,7 @@ export const InputNumber = (props: InputNumberProps): InputNumber => {
   const schema = props.schema
   const ariaLabel = props.label || schema.description || "Value"
 
-  const defaultValue = typeof schema?.default === "number" ? schema.default : undefined
+  const defaultValue = schema.default as number | undefined
   const dataIsNonNullObject = typeof props.data === "object" && props.data !== undefined && props.data !== null
   const dataIsEmptyObj = dataIsNonNullObject ? Object.keys(props.data as object).length === 0 : false
   const value = props.data === undefined || dataIsEmptyObj ? defaultValue : props.data as number
@@ -38,18 +38,32 @@ export const InputNumber = (props: InputNumberProps): InputNumber => {
 
   const min = schema.minimum
   const max = schema.maximum
-  const marginLeft = min !== undefined && max !== undefined ? 16 : 0
+  const marginLeft = min === undefined || max === undefined ? 0 : 16
   const style = { marginLeft: marginLeft, width: "100%" }
-  const formatter = ((value?: number) => {
-    if (typeof value !== "undefined") {
+  const formatter = ((value?: string | number): string => {
+    if (value !== "" && value !== undefined) {
       if (isPercentage) {
-        return decimalToPercentage(value)
+        const valueFloat = typeof value === "string" ? parseFloat(value) : value
+        return Math.round(valueFloat * 100).toString()
       } else {
         return value.toString()
       }
     }
     return ""
   })
+  const parser = ((value?: string): number => {
+    if (value !== "" && value !== undefined) {
+      if (isPercentage) {
+        return parseFloat(value.replace("%", "")) / 100.0
+      } else {
+        return parseFloat(value)
+      }
+    }
+    // this allows us to return undefined for cases where the value has been deleted
+    // when InputNumber is paired with a Slider, the Slider pointer will disappear
+    // insetad of jumping to some default value
+    return undefined as unknown as number
+  })
 
   return <AntdInputNumber
     aria-label={ariaLabel}
@@ -62,6 +76,7 @@ export const InputNumber = (props: InputNumberProps): InputNumber => {
     addonAfter={addonAfter}
     style={style}
     formatter={formatter}
+    parser={parser}
     controls={false}
   />
 }

src/controls/NumericControls/NumericControl.tsx

@@ -21,7 +21,7 @@ export const NumericControl = (props: ControlProps & RendererProps) => {
       required={props.required}
       initialValue={initialValue}
       rules={rules}
-      validateTrigger={["onBlur", "onChange"]}
+      validateTrigger={["onBlur"]}
     >
       <Col span={18}>{InputNumber({...props})}</Col>
     </Form.Item>

src/controls/NumericControls/NumericSliderControl.tsx

@@ -22,7 +22,7 @@ export const NumericSliderControl = (props: ControlProps & RendererProps) => {
       required={props.required}
       initialValue={initialValue}
       rules={rules}
-      validateTrigger={["onBlur", "onChange"]}
+      validateTrigger={["onBlur"]}
     >
       <Row>
         <Col span={8}>{SliderSingle({...props})}</Col><Col span={7}>{InputNumber({...props})}</Col>