Remove Focus Ring from WebPopUpControl

Apple did some wonderful things by changing Safari on iOS to load only desktop sites. Yes, it’s great from a user standpoint but the WebSession doesn’t tell you the platform is an iPad. Instead, it’s “Macintosh.” So I am having to modify everything in my code to try to fix some quirks.

One such thing is that when I now use a pop-up menu on Safari on the iPad, I get a focus ring around it. How can I turn that off? There is no WebPopUpMenu.HasFocusRing property like there is for WebTextControl.

So how can one turn this off? I’m assuming JavaScript? Is there some Xojo way to do it? I’ve tried to use Self.SetFocus after making a change with the control but that doesn’t work. The only way I have found to remove the focus ring is to tap my web page in some blank spot.

Hello Jon

Did you managed to remove the focus ring? I’m attempting to accomplish the same thing. No luck so far.

I ended up filing a bug report for this and Xojo has confirmed this behavior. We think it is a bug in Safari desktop as the iOS version (on phones now only as the iPad is desktop) does not have the issue.

I figured out a workaround with some ideas from Xojo. Basically the SetFocus method works to set the focus to any other control. It just doesn’t work to set it to the page itself. What I did was create a button and set the position of that button outside the page (so negative top and left values). Then in the SelectionChanged event of the pop-up, I set the focus to that button. It works like a charm!

I had a similar problem with Web 2 where the first button on the page always had the focus. I didn’t necessarily want to remove it from the focus ring, just make sure it was not selected when the page appeared. I added the following to the page.shown event:

ExecuteJavaScript("document.activeElement.blur()”)

Worked like a charm for me.

1 Like

If you want to remove the focus ring from something in WebSDK1.0 and don’t have the option via Xojo, use the dynamic style workaround:

Create a WebStyle that you want to use (e.g. noFocusRing).

Add a style to the App.HTMLHeader field in the App inspector, such as:

<style>
	.noFocusRing:focus {
		outline: none;
	}
</style>

It’s important that you create a WebStyle in the project, but don’t modify it - leave it empty. It is there really only so that you can use it in Xojo - it’s going to be overridden by the HTMLHeader text,

Finally, set the style of the control that you want to alter to the empty style (in this case noFocusRing).