Fix: clear value for a list attribute using UI edit form (#6008)

Author: bilalabbad

changelog/5934.fixed.md

@@ -0,0 +1 @@
+Fixed an issue where list attribute could not be cleared using UI edit form.

frontend/app/src/shared/components/form/fields/list.field.test.tsx

@@ -161,4 +161,28 @@ describe("List Field Component", () => {
     // THEN
     expect(formValue).toEqual({ field1: { source: { type: "user" }, value: ["test item"] } });
   });
+
+  test("returns null when list is cleared", async () => {
+    // GIVEN
+    let formValue;
+    const defaultValue: FormAttributeValue = {
+      source: { type: "user" },
+      value: ["item 1", "item 2"],
+    };
+    const component = render(
+      <TestForm onSubmit={(formData) => (formValue = formData)}>
+        <ListField name="field1" label="Test List" defaultValue={defaultValue} />
+      </TestForm>
+    );
+
+    // WHEN
+    await component.getByRole("button", { name: "Remove item 1" }).click();
+    await component.getByRole("button", { name: "Remove item 2" }).click();
+    await component.getByRole("button", { name: "Submit" }).click();
+
+    // THEN
+    expect(formValue).toEqual({
+      field1: { source: { type: "user" }, value: null },
+    });
+  });
 });

frontend/app/src/shared/components/form/fields/list.field.tsx

@@ -50,7 +50,9 @@ const ListField = ({
                 {...props}
                 value={fieldData?.value ?? ""}
                 onChange={(newValue) => {
-                  field.onChange(updateFormFieldValue(newValue, defaultValue));
+                  field.onChange(
+                    updateFormFieldValue(newValue.length > 0 ? newValue : null, defaultValue)
+                  );
                 }}
               />
             </FormInput>

frontend/app/src/shared/components/list.tsx

@@ -95,7 +95,7 @@ const ListItems = ({
                 variant="ghost"
                 onClick={() => onDelete(item)}
                 className="text-gray-500 hover:text-gray-800 h-4 w-4"
-                aria-label="Remove"
+                aria-label={`Remove ${item}`}
               >
                 ×
               </Button>