feat: c-input (string): When the input's value changes to empty string, the value is instead emitted as null. This allows a user to return a field to its default, uninitialized state as if they had never typed in the field at all, which alleviates some validation edge cases like [PhoneAttribute] not treating null and "" the same.

Author: ascott18

CHANGELOG.md

@@ -34,7 +34,8 @@
 - `c-admin-audit-log-page`: Added `userProp` prop to allow specifying a custom property name for user identification.
 - `c-admin-display`: Binary values now render as links that will download the value as a file, instead of only showing the length in bytes.
 - `c-datetime-picker`: Added prop `showTodayButton`
-- `c-input`: Added a `filter` prop for enum inputs to restrict the values available for selection.
+- `c-input` (enum): Added a `filter` prop for enum inputs to restrict the values available for selection.
+- `c-input` (string): When the input's value changes to empty string, the value is instead emitted as `null`. This allows a user to return a field to its default, uninitialized state as if they had never typed in the field at all, which alleviates some validation edge cases like `[PhoneAttribute]` not treating `null` and `""` the same.
 - `c-select`: When bound to a `ViewModel` or `ViewModelCollection`, selected items are converted to `ViewModel` instances before being emitted so that event handlers will receive the final object instance, rather than the intermediate plain model instance.
 - `c-select`: Now supports binding to a non-many-to-many collection navigation property. Selecting an item will populate the foreign key of the dependent item, and deselecting an item will clear the foreign key. This mechanism is only available when using c-select directly - it is not delegated by c-input.
 - `c-select`: The `create` prop now supports a `position` property to control whether the create item appears at the start ('start', default) or end ('end') of the dropdown list.

src/coalesce-vue-vuetify3/src/components/input/c-input.spec.tsx

@@ -341,7 +341,7 @@ describe("CInput", () => {
 
       expect(wrapper.find(".v-input--error").exists()).toBeTruthy();
       expect(wrapper.find(".v-messages").text()).toEqual(
-        "Guid does not match expected format."
+        "Guid does not match expected format.",
       );
     });
 
@@ -366,7 +366,7 @@ describe("CInput", () => {
     test("number - rule receives number, not string", async () => {
       const model = new ComplexModelViewModel({ intNullable: 7 });
       const rule = vitest.fn(
-        (v: number | null | undefined) => v === 7 || "Custom Rule Failure"
+        (v: number | null | undefined) => v === 7 || "Custom Rule Failure",
       );
       const wrapper = mountApp(() => (
         <VForm>
@@ -385,6 +385,48 @@ describe("CInput", () => {
       expect(rule).not.toHaveBeenCalledWith("7");
       expect(rule).not.toHaveBeenCalledWith("42");
     });
+
+    test("string - empty string becomes null", async () => {
+      const model = new ComplexModelViewModel({ name: "initial value" });
+      const wrapper = mount(() => <CInput model={model} for="name" />);
+
+      // Verify initial state
+      expect(model.name).toBe("initial value");
+      expect(wrapper.find("input").element.value).toBe("initial value");
+
+      // Clear the input - this should set the value to null, not empty string
+      await wrapper.find("input").setValue("");
+      expect(model.name).toBe(null);
+
+      // Type something new
+      await wrapper.find("input").setValue("new value");
+      expect(model.name).toBe("new value");
+
+      // Clear again - should go back to null
+      await wrapper.find("input").setValue("");
+      expect(model.name).toBe(null);
+    });
+
+    test("number - empty string becomes null", async () => {
+      const model = new ComplexModelViewModel({ intNullable: 42 });
+      const wrapper = mount(() => <CInput model={model} for="intNullable" />);
+
+      // Verify initial state
+      expect(model.intNullable).toBe(42);
+      expect(wrapper.find("input").element.value).toBe("42");
+
+      // Clear the input - this should set the value to null, not 0
+      await wrapper.find("input").setValue("");
+      expect(model.intNullable).toBe(null);
+
+      // Type a new number
+      await wrapper.find("input").setValue("123");
+      expect(model.intNullable).toBe(123);
+
+      // Clear again - should go back to null, not 0
+      await wrapper.find("input").setValue("");
+      expect(model.intNullable).toBe(null);
+    });
   });
 });
 

src/coalesce-vue-vuetify3/src/components/input/c-input.vue

@@ -342,11 +342,22 @@ function render() {
   data = buildVuetifyAttrs(valueMeta, props.model, data);
 
   const onInput = (value: any) => {
-    const parsed = parseValue(value, valueMeta);
+    // For string inputs, convert empty strings to null since they are
+    // visually indistinct to users and null is the baseline default value.
+    // This is consistent with how number inputs handle empty values.
+    // If we don't do this, then a field that starts null, then the user types,
+    // and then they delete all characters would end back at emptystring instead of the initial null value.
+    // This then breaks some validation like PhoneAttribute and others that don't allow emptystring.
+    if (value === "" && valueMeta.type === "string") {
+      value = null;
+    } else {
+      value = parseValue(value, valueMeta);
+    }
+
     if (valueOwner && valueMeta) {
-      valueOwner[valueMeta.name] = parsed;
+      valueOwner[valueMeta.name] = value;
     }
-    emit("update:modelValue", parsed);
+    emit("update:modelValue", value);
   };
 
   // Handle components that delegate immediately to Vuetify