Troubleshooting Row Selection and Reusable Element Issues

Need help
1

Hi there! :star_struck:

I’m stuck on a problem and could really use some fresh perspectives. I’m working with a table where I have a reusable element (an “Edit” button) in the “Action” column. When a user clicks “Edit,” I pass the unique ID of the current row with custom state to this reusable element, and the corresponding row is highlighted in the table.

However, I now want users to be able to click anywhere on the row, not just on the “Edit” button, to activate the reusable element. I’ve managed to set this up so that there’s a workflow that triggers when “Edit” is clicked, and another one when the row itself is clicked.

My goal is for both actions to produce the exact same outcome, but I’ve encountered an issue. When a user clicks “Edit” on one row and then on another, the row highlighting updates correctly according to the selected row. But if the user clicks on any other cell within the row, the highlighting doesn’t stop when a new row is clicked. It seems like the previous unique ID isn’t being cleared properly.

I suspect that because “Edit” is a reusable element within the row, the custom state for the unique ID always matches the currently selected row. So when I choose a new row, a new instance of the “Edit” reusable element is setting its state on that row.

Does anyone have any advice on how to address this?

2

Did you try to put the custom state on the page level?

3

I did it! I found a solution. I passed the unique ID back to the parent using JS2Bubble and then created a conditional reference based on that.

Sometimes, all it takes is a little break to clear your mind and get the ideas flowing again.

1 Like
4

Yay!

I agree about the little break.

I spend hours sometimes trying to figure something out and then come back to it later and it suddenly dawns on me how to do it.

1 Like
5

This topic was automatically closed after 70 days. New replies are no longer allowed.