Closed damontgomery closed 9 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".
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
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
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, theeditRows
reflects the original order.So, when
isOpen
is called, it passes the wrong row toattachComponents
. At this point, theattach
functions forSelect.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.