formBuilder not restoring typeUserAttr select value on setData

[joopvanduin]

Description:

I have added some extra classes to my Class list for number fields. If I add 2 number fields to my form with each a different class selected, save the json data into my database, edit the form again with the saved data, all Class select boxes have the same option selected eventhough I did select different classes.

Environment Details:

• formBuilder Version: current https://formbuilder.online/assets/js/form-builder.min.js
• Browser: Firefox 123.0
• OS: Mac 14.3.1 (23D60)

Expected Behavior

The Class select boxes should have the previously chosen values on form load

Actual Behavior

The Class select boxes all have the same option selected on form reload

Steps to Reproduce

1) Add two number fields with custom classes added to them to a form 2) Pick different options for each Class select box 3) Save form 4) Load form with saved data

Screenshot - (optional)

[joopvanduin]

I have installed formbuilder locally according to https://github.com/kevinchappell/formBuilder/blob/f09db165000969a538ce988770eb0a15dc1f1fed/CONTRIBUTING.md

I have been able to recreate the problem by editing demo.js and adding a user attribute (className) to the number field.

I have attached the demo.js file in demo.zip

Steps to recreate the problem

1) start the demo 2) add big numbers field 3) select user class from dropdown 4) save form 5) edit form 6) check console... you can see that the data that was stored has the right className 7) check class dropdown of number field and notice it is wrong (If I inspect the select element the class contains the old className selection and I think that is where the problem is. The selected option is taken from this wrong class. The right className previously selected is available in the data (see console)

Note: Sometimes you need to save and edit twice for this problem to occur.

Hope this helps

demo.zip

[joopvanduin]

Also:

If you toggle between edit and render this problem occurs. If you then reload the demo page the latest selected option is correctly restore in the dropdown

[lucasnetau]

Thank you for the report and reproduction. I'll take a look into issue

[lucasnetau]

Hi @joopvanduin on initial investigation it appears this is when overriding className (or possibly built in attributes). Custom typeUserAttrs do not show the same issue

Will take a look further next week.

[joopvanduin]

Hi @lucasnetau

Thank you for responding so fast.

Are you saying that className (my custom attribute) is an existing attribute within formbuilder that can not be used as custom attribute within typeUserAttrs. I am almost sure it worked in the beginning when I started a year or so ago with formbuilder. To test this, is there any way I can use an old release, I serched for it but can not find any reference to it.

I will also test with another custom attribute name.

All the best Joop

[joopvanduin]

Hi @lucasnetau

Sorry I do understand what you mean by overriding className, it is an 'reserved' attribute and I just added options to make it a dropdown with pre-selected choices.

I have now added a custom attribute and after saving and editing it again the previously selected option is not restored. If you change the option description in an editor, the webpack-dev-server restarts and only then the selected option is correct

See dropbox link to demo.zip which contains the demo.js and a screen capture video how to recreate the problem

https://www.dropbox.com/scl/fi/x5gil1bljlovkn5mpujve/demo.zip?rlkey=qdrh2mz11ox6tlbp8g25ssqc1&dl=0

Thanks Joop

[lucasnetau]

I cannot replicate with your test attribute with the current release.

Can you please try using this older version and see if your issue still exists?

npm i formBuilder@3.19.1

[joopvanduin]

I have tried it but get jQuery not found... looking into it

[joopvanduin]

Added my own jquery file and now it is runnig but same problem

[joopvanduin]

I have used the form-builder.min.js from the formBuilder@3.19.1 installation in my website and all works fine again. The right className option is selected on edit

When I put the current online version back the error occurs again

[lucasnetau]

Thanks. className is a special case. I'm working on identifying if we can support this override. If enhancedBootstrap function is enabled then this is broken due to the row/column identifiers. I have a trial fix for non-bootstrap mode

[joopvanduin]

OK, but if I test any version locally via https://github.com/kevinchappell/formBuilder/blob/f09db165000969a538ce988770eb0a15dc1f1fed/CONTRIBUTING.md instructions, any user attribute value, not just className, is not restored... is this due to the same problem?

[lucasnetau]

I cannot replicate for any other typeUserAttrs. All Jest test cases are passing and local user testing does not show this issue. This doesn't mean there isn't an issue, just that I cannot replicate locally.

If you can provide reproducibe Jest test cases that fail that would be handy (/tests directory) run with npm run test

Otherwise, hang tight. I am looking into the issue.

[joopvanduin]

OK! Will try to test. Thanks!

[lucasnetau]

As a starting point, this is the current test

  test('can load formData with value for select typeUserAttr into stage', async() => {
    const config = {
      typeUserAttrs: {
        '*': {
          testSelectAttribute: {
            label: 'Class', // i18n support by passing and array eg. ['optionCount', {count: 3}]
            multiple: true, // optional, omitting generates normal <select>
            options: {
              'red form-control': 'Red',
              'green form-control': 'Green',
              'blue form-control': 'Blue'
            },
            style: 'border: 1px solid red',
            value: 'red form-control',
          }
        },
      },
    }
    const fbWrap = $('<div>')
    const fb = await fbWrap.formBuilder(config).promise
    fb.actions.setData([
      {
        type: 'text',
        testSelectAttribute: 'green form-control',
      }
    ])

    const input = fbWrap.find('.text-field .testSelectAttribute-wrap select')
    expect(input.length).toBe(1)
    expect(input.val()).toEqual(['green form-control'])
  })

[lucasnetau]

Please try the patch in PR #1538

[joopvanduin]

I am not very good at using Git. How do I generate a new form-builder.min.js file from the patch so I can test it in my website?

[lucasnetau]

https://gist.github.com/lucasnetau/d44e041c7c334a0bb074c2a575fd1fc8

[joopvanduin]

Thank you.I will test and get back to you

[joopvanduin]

Tested it and it remains a problem. If I only have one number field with a className select box it works. If I have a second number field with a select box below it, the second select box takes the selected value of the first one after a save and reload even though I did select a different option for the second number select box

[lucasnetau]

https://gist.github.com/lucasnetau/d44e041c7c334a0bb074c2a575fd1fc8

Try the updated version now. I've added an additional copy of the data to prevent leaking of attribute value between controls.

[joopvanduin]

That worked!!!

[lucasnetau]

Great. Thank you for testing. I'll update the test cases with the example you have provided

[joopvanduin]

Thank you for fixing this!

[lucasnetau]

Test cases added

[github-actions[bot]]

:tada: This issue has been resolved in version 3.19.7 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: