Modal opening on a card in a repeater block not opening the *expected* data/details

[aMacDawg]

Expected outcome

As a user, when I click on the "open" button of a card in a repeater block, I expect that the details/data for that specific card will be reflected in the modal that is opened

Actual outcome

As a user, when I click on the "open" button of a card in a repeater block, the details of the last card in the repeater block (ie chat_8ALgfKbt6mDT) is consistently opened, regardless of which of the other card's "open" buttons that I click:

My question: What do I need to configure/implement, such that the Open button of card opens the expected card modal with the correct corresponding details?

Implementation

Components are nested like this:

• Screen
  • New data provider
    • New repeater
      • New Card
      • New Modal

The Card is configured to open a modal (and the Open button is linked to an "open action" which opens the New Modal component

The New modal settings dont really have anything configurable and there's only one piece of "documentation" for the Modal component itself which is more of a changelog summary than anything else:
https://docs.budibase.com/changelog/modal-component

[mikesealey]

Hey @aMacDawg

With the component tree laid out in this way, you're actually creating a new modal for every row you fetch in that table, which will eventually run into performance issues. You will only see one in the component tree, but with it being inside a repeater, under the hood one is created for every row.

You should make sure your modal is not a child component of a repeater. In your Card component, with the button's on-click actions you can specify that they should open the modal. You should also use a "Update State" action to set that card's row_id into state.

Inside the modal you can then add a data provider set to fetch one row from the table, filtering on _id that matches state.row_id (that you set on click). Now the row you're looking for is available in the Data Provider. You should note, however, that Data Providers return an array of objects, even if there's only one row, so you should index your Data Provider's rows using .0

Here's an app-export where you can take a closer look.
14810-export-1729243001404.tar.gz