State of variable not affecting "hidden" property as expected

For an extremely simple app I see state-toggling behavior that is buggy in "Edit" mode but not "Preview" mode. The app consists of two buttons ("A" and "B") and one boolean variable: "showA". The "hidden" attributes of buttonA and buttonB are !showA.value and showA.value, respectively. The event handlers of the two buttons set the value of showA as false and true, respectively. In the "Preview" mode this app behaves like a whack-a-mole game, in that I click on buttonA to make it disappear (at which time buttonB appears), and then likewise for buttonB. In "Edit" mode, however, buttonA remains visible after I click on it, until I click anywhere in the app, at which time buttonA disappears. Likewise for buttonB. Can anyone explain this? My hunch is that this is caused by async behavior of the setValue invocation. If that is the case, is there a way that I can delay the re-rendering of the page until after the asynchronous change of state?

In edit mode, the visibility of components is 'always on' when you select that component. So, by testing Button A in edit mode you are selecting it, which makes it visible.

If you look at the component name tab (the little identifier widget found in the corner of selected components) when it is selected, there should be an eyeball with a line through it to denote that it would otherwise be hidden.

ETA: this thing



1 Like