fix(DFD-536): Fix click on collapsible toggle (#5122)

Talend · Jan 16, 2024 · f675918 · f675918
1 parent f0770b1
commit f675918
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 25 deletions.
diff --git a/.changeset/itchy-eggs-jump.md b/.changeset/itchy-eggs-jump.md
@@ -0,0 +1,6 @@
+---
+'@talend/ui-playground': patch
+'@talend/react-forms': patch
+---
+
+fix(DFD-536): Fix click on collapsible toggle
diff --git a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js
@@ -81,20 +81,16 @@ export default function createCollapsibleFieldset(title = defaultTitle) {
 		const { id, schema, value, actions, index, ...restProps } = props;
 		const { items, managed } = schema;
 
-		function onToggleClick(event) {
-			if (event) {
-				event.stopPropagation();
-				event.preventDefault();
-			}
-
+		function onToggleClick() {
 			const payload = {
 				schema: props.schema,
 				value: {
 					...props.value,
 					isClosed: !props.value.isClosed,
 				},
 			};
-			props.onChange(event, payload);
+
+			props.onChange(undefined, payload);
 		}
 
 		const getAction = useCallback(() => {

diff --git a/...ages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.test.js b/...ages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.test.js
@@ -137,7 +137,7 @@ describe('CollapsibleFieldset', () => {
 		await userEvent.click(screen.getByRole('button'));
 
 		// then
-		expect(props.onChange).toHaveBeenCalledWith(expect.anything(), {
+		expect(props.onChange).toHaveBeenCalledWith(undefined, {
 			schema: extendedSchema,
 			value: { ...value, isClosed: false },
 		});

diff --git a/packages/playground/mockBackend/mock/kit/example.json b/packages/playground/mockBackend/mock/kit/example.json
@@ -109,9 +109,7 @@
       },
       "array": {
         "strings": ["red"],
-        "keyvalue": [
-          { "value": "value", "key": "key" }
-        ]
+        "keyvalue": [{ "value": "value", "key": "key" }]
       }
     },
     "uiSchema": [
@@ -276,11 +274,7 @@
                         "path": "example.url"
                       }
                     ],
-                    "options": [
-                      "triggers.url",
-                      "triggers.password",
-                      "triggers.login"
-                    ],
+                    "options": ["triggers.url", "triggers.password", "triggers.login"],
                     "type": "healthcheck"
                   }
                 ],
@@ -296,21 +290,24 @@
                 "key": "array.strings",
                 "title": "Strings",
                 "widget": "array",
-                "items": [{
-                  "key": "array.strings[]",
-                  "widget": "select",
-                  "titleMap": [
-                    { "name": "red", "value": "red" },
-                    { "name": "green", "value": "green" },
-                    { "name": "blue", "value": "blue" }
-                  ]
-                }]
+                "items": [
+                  {
+                    "key": "array.strings[]",
+                    "widget": "select",
+                    "titleMap": [
+                      { "name": "red", "value": "red" },
+                      { "name": "green", "value": "green" },
+                      { "name": "blue", "value": "blue" }
+                    ]
+                  }
+                ]
               },
               {
                 "placeholder": "key value",
                 "key": "array.keyvalue",
                 "itemWidget": "collapsibleFieldset",
                 "itemTitle": "Column",
+                "itemManaged": true,
                 "items": [
                   {
                     "key": "array.keyvalue[]",