TL:DR

To ensure the interaction override of a specific state within a component’s instance, it must correspond to the state displayed during the preview launch of your prototype. If any other state is active, the override will be disregarded, and the default behavior will prevail. Ideally, I would like the instance to retain any override, regardless of its current state.

IN DEEP

Let take a simple button with three states: default, hover, selected

We’ve got a “while hovering” from default to hover,

A " on click" from hover to selected and from selected to hover

An finally a “mouse leave” from hover to default

Consider a scenario where three instances of this component exist, with the condition that two of them cannot be selected simultaneously. Suppose we choose the first instance, A, and then select instance B. In this case, when instance B is clicked, instance A should revert to its default state.

In this example we will create some spaghetti flow (similar results can be achieved with variables). Given that our component includes a hover state, we need to toggle it to override the ‘on click’ interaction. Once every instance’s ‘on click’ state has been override, we can revert them to their default states. Surprisingly, upon launching the prototype, none of the overrides are retained.

However, if we toggle each instance to display their ‘hover’ state at launch, the overrides work as intended.

It appears that only the state currently active when the prototype is initialized/launched retains its interaction override.

Therefore, we aim for instances to retain a record of their overrides."