formio / formio.js

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

EditGrid mixing up row IDs and fails to run attach so custom values are not populated. #5487

Closed damontgomery closed 5 months ago

damontgomery commented 5 months ago

Describe the bug

We have an edit grid with a select box that is populated by Custom Values (JS). After creating 2 items, if you edit the 2nd, everything is fine, but if you edit the first item, the select options are empty.

Version/Branch 4.18.1

To Reproduce Steps to reproduce the behavior:

View the form

Expected behavior The select options should remain populated

Screenshots EditGrid_issue

See https://github.com/formio/formio.js/blob/e77448b2d99adaea1965fb33eba441b1d656f904/src/components/editgrid/EditGrid.js#L473

Additional context

I believe what is happening here is that in attach, there are two arrays of objects that represent rows, this.rowElements and _this6.editRows.

The rowElements order changes since when you edit [A,B] the DOM order becomes [B,A]. However, the editRows reflects the original order.

So, when isOpen is called, it passes the wrong row to attachComponents. At this point, the attach functions for Select.js never run and the Custom Values are never run, so the default is used. In our case the default is an empty JSON object, so we don't get any values.

damontgomery commented 5 months ago

Closing this since it was a bug introduced by our custom template.

We were attempting to provide better screen reader support and lifted the open rows out of the table and rendered them below the edit grid. This caused the order to change and this component requires the order to remain the same because of the way indexes are used to refer to items described previously.

It would be helpful if the references are more robust and use IDs or some other method, but maybe that can be a feature request.

We were able to resolve the issue by leaving the items in the same order within the "table".

brendanbond commented 5 months ago

Yeah it'd be cool if you wanted to open a separate issue/feature, we're always hoping to improve accessibility and would love to hear more details from you