formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.87k stars 1.06k forks source link

Custom component, children create duplicate key #5747

Open Jacopops opened 1 month ago

Jacopops commented 1 month ago

Describe the bug When I drag a new custom component into the module and there is another one already inserted, the keys of the children are not updated but only of the parent causing duplicate keys for each component inserted

Version/Branch 5.3.0

To Reproduce Steps to reproduce the behavior:

  1. Create form
  2. Add multiple custom component
  3. show the json
  4. check the duplicate key

Expected behavior The same of the parent key, add a number based on how much component there are in a form

Screenshots First element json:

image

Second element json:

image

Additional context Code of custom component:

H2OIndirizzo: {
                        title: 'Indirizzo',
                        key: 'H2OIndirizzo',
                        icon: 'home',
                        schema: {
                            label: 'Indirizzo',
                            type: 'card',
                            key: 'h2o_indirizzo',
                            components: [{
                                label: 'Regione',
                                type: 'select',
                                key: 'regione',
                                input: true,
                                case: "uppercase",
                                validate: {
                                    required: true
                                }
                            }, {
                                label: 'Provincia',
                                type: 'select',
                                key: 'provincia',
                                input: true,
                                case: "uppercase",
                                validate: {
                                    required: true,
                                    maxLength: 2
                                }
                            }, {
                                label: 'Comune',
                                type: 'select',
                                key: 'comune',
                                input: true,
                                validate: {
                                    required: true
                                }
                            }, {
                                label: 'Indirizzo',
                                type: 'textfield',
                                key: 'indirizzo',
                                input: true,
                                validate: {
                                    required: true
                                }
                            }, {
                                label: 'Numero civico',
                                type: 'textfield',
                                key: 'numerocivico',
                                input: true,
                                validate: {
                                    required: true
                                }
                            }, {
                                label: 'CAP',
                                type: 'number',
                                key: 'cap',
                                input: true,
                                mask: false,
                                tableView: false,
                                delimiter: false,
                                requireDecimal: false,
                                inputFormat: "plain",
                                truncateMultipleSpaces: false,
                                validate: {
                                    max: 99999,
                                    required: true
                                }
                            }]
                        }
                    }

And I discovered that by changing the type of component in a card this problem does not happen

lane-formio commented 1 month ago

Sorry, but I noticed you put the version as 5.3.0. What is version 5.3.0? Because our most edge version of formiojs is 5.0.0-rc.72

Jacopops commented 4 weeks ago

Sorry is the @formio/react package.