UIEXT-3044: Set value on focusout in NumberControl when value is not a number (#95)

UIEXT-3044 (Prevent number inputs to set the value to null in the dialog)

Author: PaulBrnrther

.changeset/ready-dolls-cross.md

@@ -0,0 +1,5 @@
+---
+"@knime/jsonforms": patch
+---
+
+Set a value on focusout when the number provided by the number input is not a number in the NumberControl.

packages/jsonforms/src/uiComponents/NumberControlBase.vue

@@ -53,22 +53,32 @@ const minParams = computed(() => validationParams.value.min);
 const maxParams = computed(() => validationParams.value.max);
 
 const onFocusOut = () => {
-  const num = props.control.data;
-  if (minParams.value && !respectsMin(minParams.value)(num)) {
+  const currentDataValue = props.control.data;
+  const isNotANumber =
+    typeof currentDataValue !== "number" || isNaN(currentDataValue);
+  let updatedValue = isNotANumber ? 0 : null;
+  const comparisonValue = isNotANumber ? 0 : currentDataValue;
+  if (minParams.value && !respectsMin(minParams.value)(comparisonValue)) {
     const { min, isExclusive } = minParams.value;
     if (isExclusive) {
-      props.changeValue(min + stepSize);
+      updatedValue = min + stepSize;
     } else {
-      props.changeValue(min);
+      updatedValue = min;
     }
-  } else if (maxParams.value && !respectsMax(maxParams.value)(num)) {
+  } else if (
+    maxParams.value &&
+    !respectsMax(maxParams.value)(comparisonValue)
+  ) {
     const { max, isExclusive } = maxParams.value;
     if (isExclusive) {
-      props.changeValue(max - stepSize);
+      updatedValue = max - stepSize;
     } else {
-      props.changeValue(max);
+      updatedValue = max;
     }
   }
+  if (updatedValue !== null) {
+    props.changeValue(updatedValue);
+  }
 };
 </script>
 

packages/jsonforms/src/uiComponents/__tests__/NumberControl.test.ts

@@ -127,6 +127,18 @@ describe("NumberControl", () => {
     expect(changeValue).toHaveBeenCalledWith(result);
   });
 
+  it("sets 0 if value is not a number on focusout", async () => {
+    props.control.data = NaN;
+    const { wrapper, changeValue } = mountJsonFormsControlLabelContent(
+      NumberControl,
+      {
+        props,
+      },
+    );
+    await wrapper.findComponent(NumberControl).trigger("focusout");
+    expect(changeValue).toHaveBeenCalledWith(0);
+  });
+
   it("sets the minimum via state provider", async () => {
     props.control.uischema.providedOptions = ["validation.min"];
     let provideMin: (params: {