Figma Support Forum

Creating Interactive Table


I’m trying to create an interactive table using nested interactive components.

I started out creating an interactive component to emulate an Editable Text Field that animates when the user clicks the field. This field has three “Selected State Properties” - Default, Editable Carrot Invisible, Editable Carrot Visible. I next created an “Editable Row” component. It takes three editable text fields and resets each Editable Text Field’s state property to “Default”, so that the editing carrot will clear from the text field that just lost focus and will appear in the text field that is gaining focus as the user clicks between Editable Text Fields.

The afore mentioned components work well and as expected. The problem comes in when I try to put a couple of rows together and switch between them. Each individual row behaves as expected, but when the user clicks on another row that doesn’t have focus, but is gaining focus the carrot will not disappear from the Editable Text Field as desired/expected. I can’t seem to make the state on the component shift as I want to, and then stay shifted.

After watching some videos and reading some articles I feel like the “Component Memory” feature is perhaps behind this, maybe? I learned about that feature in the “Office Hours: Get Started With Interactive Components” @ ~22:00.

Any thoughts would be appreciated. Thank you!

Link to component file: