[Dynamic Form] Cannot Clean Up Date Field and Save it

[wuxiaojun514]

Category

[ ] Enhancement
[X] Bug
[ ] Question

Version

3.20.0

Problem Detail

I want to clean up the date field in Dynamic Form to set value to null.
By default, Dynamic Form doesn't support text input on date field, you need overwrite this field and enable allowTextInput property on DatePicker control so you can type/clean the date on it

It worked at least one year ago.

Recently my team found that they cannot clean up date and it will throw error like Cannot read properties of null (reading 'toString')

The root casue is on OnChange method in DynamicForm,tsx

However, if I modify the code from

field.stringValue = newValue.toString();

to
field.stringValue = newValue?.toString();

I still cannot save my cleanup, because its newValue is null and Dynamic Form will only add fields whose newValue is not null/undefined into changes. So my cleanup on date fields will never be submitted.

I will debug the Dynamic Form control deeply to understand the logic of this code.

Steps to Reproduce

1. Make sure your list contains date field
2. Override this date field in Dynamic Form to make sure the DateTimePicker enabled allowTextInput property
3. Test your form customizer with an existing list item and try to clean up this date field
4. You should get the same error as I got.

[wuxiaojun514]

As I checked, the newValue property in DynamicField is undefined by default.

And it seems that only date field will has null value on newValue property when it get cleanup (I tested with taxonomy and lookup, they just return an empty array).

I guess the condition check if (field.newValue !== null && field.newValue !== undefined) in

  /** Item values for save / update */
      const objects = {};

      for (let i = 0, len = fields.length; i < len; i++) {
        const field = fields[i];
        const {
          fieldType,
          additionalData,
          columnInternalName,
          hiddenFieldName,
        } = field;
        let fieldcolumnInternalName = columnInternalName;
        if (fieldcolumnInternalName.startsWith('_x') || fieldcolumnInternalName.startsWith('_')) {
          fieldcolumnInternalName = `OData_${fieldcolumnInternalName}`;
        }
        if (field.newValue !== null && field.newValue !== undefined) {

          let value = field.newValue;
          ......
}

is like "defensive programming" to avoid code crash.

We can just change this check to field.newValue !== undefined so the date field cleanup can be added into submission.

I can create PR for this issue (Maybe also make allowTextInput enabled as default for date field?)

[michaelmaillot]

Hi @wuxiaojun514,

Thanks for raising this. FYI this string conversion error is known and has been declared in #1923.

Regarding the bug that prevents the date input to be cleared out, you're right it should be editable juste like it is in the native list form UI.

Would you like to fix this?

[wuxiaojun514]

Hi @michaelmaillot ,

You can assign this task to me.
Currently I have another big PR on Dynamic Form (#1913 ), I will do this task once that one has been merged in order to avoid conflict.
Also can I set allowTextInput enabled as default for date field?

[michaelmaillot]

Yes, but be sure that you'll cover the field validation, just as it is for a text field.

[wuxiaojun514]

Ok, I will double check the field validation when I enable allowTextInput property for date field.

[wuxiaojun514]

Hi @michaelmaillot

I have raised the PR which also will enable allowTextInput property for date field

I tested the change with several different other fields (taxonomy, lookup...) and I don't get side effect.
Regarding field validation, DatePicker control will handle whether input is a valid date string or not.

---

But the "Column Validation" seems not work properly in Dynamic Form, it will always get triggered whenever the value it is.
I think it is another issue, I will do more testing on it and raise a new ticket