Xojo2023r4: WebPopupMenu - when getting focus no visual indication

When WebPopupMenu control gets focus (via tabbing or SetFocu) there is no way to know that this control is actually selected. I don’t see anything in the IDE that controls this behavior. What shall I do to make it apparent to the user that WebPopupMenu has focus?

You don’t get the gray ring around it?
image

You can use the custom_select_control if you prefer the blue ring
image

or try to override the CSS for WebPopupMenu.

I don’t see the gray ring around WebPopupMenu (which is what I would expect).

When you are saying “use the custom_select_control” what does that mean?

The WebPopupMenu has Primary indicator, using Sandstone bootstrap them compatible with Xojo.

Check the examples and search for that one:

Alberto;
What you have suggested means a lot work for me. I would need to replace all controls with the new SDK one, not just that, I would need to add few methods and test that it works. All this work is just to show that the control is selected. (please keep in mind, I am converting existing Web App with several web pages that have large number of controls, I am not designing anything new)

Is there really no way of making default “out of the box” WebPopupMenu control work as expected?

I don’t know why you don’t see the gray selection ring, that is the default behavior.
Are you on a Mac? maybe a system setting?
If you expect the selection ring to be other color, the only option “out of the box” is changing the Indicator (changing the color of the control too).

If you want all your buttons to have the same blue selection ring like this (once you know why you don’t see the ring):
screencast2024-01-2416-12-30-ezgif.com-video-to-gif-converter

You can add this code to the App - HTMLHeader section:

<style>
.btn { 
--bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); 
}
</style>

this code override the bootstrap default color.

Alberto, buttons behave correctly. I was referring to WebPopupMenu control and WebToolbarButton of type Menu.

I’m sorry, I think I’m lost in translation.

Isn’t one of the controls on my previous post a WebPopupMenu? I haven’t work with WebToolbarButton type Menu so I can’t help there.

I have added the code that you suggested but it is still not showing properly.
This is how the focus is set:
timer.CallLater(0, WeakAddressOf Me.FormatPopup.SetFocus)


Are you sure that FormatPopup has the Focus?
Can you press the spacebar and it makes the control to show the options?
I don’t know why your control does not show the Focus ring.
If you have this project on the web and I can access it, I may figure it out.

As you can see hitting tab right after the message (when the focus is set) I get this

Further observation, as you see after hitting tab the edge of the format type popup control shows different shade of blue, which is great. However, this should be the case as soon as the control gets the focus. Please note, the control is using Primary indicator of scheme Sandstone - so nothing special or fancy about that.

I think your problem is that there is a bug (or unexpected behavior) with Me.FormatPopup.SetFocus and is not really setting the focus.

Having this code in a button:

TextField1.SetFocus

I get this:
image
changing the code to:

PopupMenu1.SetFocus

gives:
image

even trying to use timer.calllater 1000 doesn’t set the Focus on the webpopupmenu.

We need to see if there is a bug report about this or open one.


Edit: here is what I get with a sample project:

screencast2024-01-2417-13-55-ezgif.com-video-to-gif-converter


Edit2: Issue #75380

Thank you for confirmation of the bug and creation of the issue.

1 Like

Fixed for next release.
Thank you Ricardo

1 Like

Thanks for all your help :slight_smile:

1 Like

The only thing I’m still missing now from WebPopupMenu is the ability to find items by writing on the keyboard, instead of using the arrow keys. Other than that, it’s pretty accessible now.

1 Like

I have created another issue:
https://tracker.xojo.com/xojoinc/xojo/-/issues/75467

That is pertaining to WebPopup menu item and WebToolbarMenuButton, there is a problem using cursor keys to navigate WebPopup menu items.

1 Like

That one was tricky, but it will be fixed in 2024r1. Thanks a lot for taking the time to report it.

3 Likes