Hey Everyone! I am dealing with some strange behav...

# compose

[Garrett Coughlin]

Hey Everyone! I am dealing with some strange behavior with a LazyRow. Based on a boolean property, I am highlighting a UI element. The problem is when the Boolean Property changes, the UI only updates when the element is no longer visible on the screen

[Francesc]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1659020728788179

[Garrett Coughlin]

Oops! Sorry about that. Wanted my question to have enough information to be clear… I’ll delete it and reformat

[Garrett Coughlin]

The problem is when the Boolean Property changes, the UI only updates when the element is no longer visible on the screen (in this case, when the user scrolls horizontally and the button leaves the page, when scrolling back to the button selected, it now shows highlighted, and the previously highlighted button is no longer highlighted)

Photo’s 1 - 3 show this behavior. ‘All’ is the default filter. On Screen One, ‘Title’ is selected. the user must drag the element out of view (screen two) and then coming back to the left most side of the row (screen three) you can see that the UI has shown this change.

Why does the Lazy Row only show this update when the user scrolls the element out of view?

I am using a lazy Row, and passing in a list where each element in the list is a data class (name : String, isSelected : False). I am using the isSelected property to style the button in the UI

each button has a callback function, which calls a function to iterate over the list I use for the Lazy Row, finds the element, and toggles that elements isSelected property to true.

Here is the code I use for this. A data class with two params, and a list of these that I use to pass into the lazyRow. I have a callback that each button calls when clicked, which finds the clicked element, and changes the state of that element (which is what I thought would trigger a re-render of the LazyRow, as this is the list that the LazyRow is rendering)

Finally, here is the lazyRow, how it’s called, the parameters and the Composable it renders for each element of the list.

I am a few months into my first software job, so any advice is greatly appreciated. I hope this question is clear and concise!

[Francesc]

I'd suggest setting a key for your elements in the list, it's an optimal optional argument to the items method

[Garrett Coughlin]

Thank you! I’ll look into this now

[Garrett Coughlin]

I tried that but so far no luck… I’ll keep researching and if I get an answer I’ll post it here

[Francesc]

your buttonsList should be an immutable list, you are mutating the contents of the list (toggling the `isSelected`flag). That's not how it should work, you should make a copy of the list instead

[Garrett Coughlin]

Thank you for the update! I’m working on this now and will make the list immutable and try it out

[Garrett Coughlin]

Thank you so much!! Your advice put me on the right track and I finally got this figured out

[Garrett Coughlin]

I changed my list to a state list like this

[Garrett Coughlin]

And now this is working as it should. Really appreciate your help this had me blocked for a few days