diff --git a/.changeset/itchy-eggs-jump.md b/.changeset/itchy-eggs-jump.md new file mode 100644 index 00000000000..511450ee03e --- /dev/null +++ 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 index d6ffe61e3f6..94166a45991 100644 --- a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js +++ b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js @@ -81,12 +81,7 @@ 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: { @@ -94,7 +89,8 @@ export default function createCollapsibleFieldset(title = defaultTitle) { isClosed: !props.value.isClosed, }, }; - props.onChange(event, payload); + + props.onChange(undefined, payload); } const getAction = useCallback(() => { diff --git a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.test.js b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.test.js index 2d9b15bfc27..62aae154343 100644 --- a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.test.js +++ b/packages/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 index 6766c262037..cec63cee94f 100644 --- 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[]",