I am creating sortable icons where clicking on them will display either “Sort from newest to oldest” or “Sort from oldest to newest”. There are two icon components representing these sorting directions, and two floating windows to inform users about the current sorting state. The icons indicate “newest to oldest” and “oldest to newest” sorting respectively, while the floating windows prompt users that the sorting is set to either “Sort from newest to oldest” or “Sort from oldest to newest”. I use a boolean value to determine the current state, with True representing “Sort from newest to oldest” and False representing “Sort from oldest to newest”. The default state is set to True.

The two images above show my two different expressions for implementing this functionality. In the first expression, I simply place the floating window’s “open overlay” before the “change to” icon statement. This causes an error where, after the first change to the other icon and floating window display, the next click makes the icon correct only while the floating window is displayed. Once the floating window disappears, the icon reverts to the previous state. This issue only occurs when sorting down, meaning a specific “change to” part of the expression is run twice when the floating window closes. However, if I modify the expression so that both the if and else blocks place the “change to” new icon before the “open overlay”, it displays correctly. Why does this happen?