Strange glitch when styling for :selected


#1

I have groups of objects that should fire the :selected style (a white shadow) on Mouse Enter and disable the :selected style on Mouse Exit, this happens correctly but the first time it glitches and applies strange styles. When i hover over another group, it glitches the first time and after that it applies correctly, and the same happens when i come back to the first group.

In the gif, i have 3 groups, each has to fire its own :selected style:
Mar-27-2020%2021-55-58

Here are the groups:



And here are the properties of each group:

Prueba.rp (147.6 KB)


#2

Why not use the :mouseover style instead? Then no code needed. If grouped, just turn on the “Fire mouse style effects” option for the group (in the “More” menu; the three-dot menu in upper-right of Interactions pane.)


#3

Because i need to trigger the same effect with other actions that don’t depend on interacting with the group itself, like for example, i need to select items from a grid and depending on that selection, activate the same effect in this groups.


#4

OK, makes sense. I checked out your file and tried applying only :mouseover and it behaved the same. Looks like it might be trying to apply a default styling for shapes (Ellipse, drawn Shape, etc.) before the :mouseover or :selected style gets applied.

:thinking: …I don’t get it. Submit as bug to support@axure.com


#5

Would it be possible to get an update on this? I seem to be having similar issues when applying mouseover styles to some buttons I have created.

A common factor between the two scenarios - Outer shadow applied on mouse over / mouse down


#6

I’d recommend contacting support@axure.com

I don’t see this same effect/bug for basic buttons, nor for custom “advanced” buttons/widgets with multiple states implemented as dynamic panels. If you can post an example .rp file then users here can help troubleshoot and offer solutions.

For the specific issue from OP, where the initial Mouse Enter event causes a strange blip when applying selection state with a shadow effect, but only for the first time, I can recommend this solution as a workaround. At least, this works for me on Win11 + Chrome, or Firefox or Edge browsers.

  • Instead of changing the selection state for a (large) group of widgets, convert them to a dynamic panel with (at least) two states: Default, Shadow.
    • In both states, remove all interaction styles for :mouseover and :selected
    • In the Shadow state, style the widget(s) the same as if they were selected (e.g., apply shadow effects to the default for these widgets.)
  • In the Mouse Enter or Mouse Hover event, apply an action of
    Set Panel State of This to Shadow
    • If you want to ensure only one of these widget/groups is selected at a time, and/or support selection remotely or programmatically, assign a Selection Group to the dynamic panels and add an action of Set selected/checked of This to Shadow (after the Set Panel State action)
    • On any one widget/group inside the dynamic panel, assign these events:
      • Selected
        Set Panel State MyParentDP to Shadow
        Unselected
        Set Panel State MyParentDP to Default