Button Group, Focus given white border unable to remove

statefulButtonGroup.rp (70.3 KB)

Have a look at the attached PR9 file. i have a button group in which one button can have focus at a time. On ‘click outside’ focus is lost. It would seem that I have a very simple solution to replicating what I need, however Axure is giving my buttons a white outline.

Try using Selection instead of Focus. If you programmatically set focus on a widget, some browsers will still show their own focus indicator, to ensure accessibility.

To do this, style Selected just as you have for Focused, and remove the Focused style for these buttons. Assign a Selection Group to all 3 buttons (click “Show More” in the Interaction Styles section.) Then change your Set Focus actions to Set Selected.

1 Like

Thanks for the reply mbc66!

I tried that but I seem to need to set the focus, else the ‘treat as lightbox’ doesn’t reliably work. ‘treat as lightbox’ is needed as, if the user clicks anywhere else, focus needs to be removed.

Can you have a look at my file?

statefulButtonGroup.rp (75.0 KB)

I don’t understand the purpose of showing “This” with “treat as lightbox” …what purpose does that serve? The only things I see it doing is it eliminates the MouseOver style for the other unfocused/unselected buttons, and requires two clicks of any other clickable item–the first to close the lightbox (which has no background fill, so not even apparent it is in effect) and the second to actually click that item–so it feels like a usability bug likely to cause confusion.

I get the desire to show a widget as focused or selected until something else is clicked–although this isn’t typical button or tab behavior.

Here’s another approach: in the updated file below I defined a Focused interaction style for the buttons to match your Selected style (and created a named Widget Style for this, just to make it easier to apply to multiple widgets.) For me, on Windows 10, it overrides the browser’s focus style in Chrome, Firefox and Edge. See “My Component 3 (focus only)” in which each button just has “Focus This” in the Click or Tap event. I think this works the way you intend.

I also made a “My Component 4 (select only)” to show a workaround for that method. The group has a Mouse Exit event that unselects all its widgets. Not the same as doing this with any other click, but similar. Other than this, you could set a Page Clicked event that does same thing, or include other clickable widgets in the same selection group.

statefulButtonGroup.rp (81.6 KB)

1 Like

mbc66 thanks so much! I had had been way over thinking it. Such a simple solution… I’m ‘morto’. Thanks again!

Do you work for Axure support?

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.