WebControlWrapper IncludeInTabOrder

I’m building a custom control. I want to include it in the tab order so I created the constant for “IncludeInTabOrder” and set it to True.

However, when rendering my control I don’t know what to put as the taborder in the HTML of the div. Is there a way to retrieve the tabIndex property so I know what to set this to?

You don’t. We render the controls to the page in the order that the tab order is supposed to go.

The reason we do this is that the browsers all tend to handle the attribute slightly differently. Rendering them to match the tab order gave us the most consistent results.

Unfortunately this is not sufficient. My WebControlWrapper is exclusively a div tag. Unless I set tabindex="<>" then it will not get focus even though I have the “IncludeInTabOrder” constant set.

If I set the tabindex to -1 it will only get focus when clicked on it but not when “tabbing-through” (which is the generally expected behavior for -1)

But I can’t set it to its proper integer value because there is no property for me to determine what this should be.
I created “tabindex” on the control itself that the user can manually set but this doesn’t seem to resolve the issue either.

Just set the tabindex to zero:

return "<div tabindex=""0"" id=""" + ControlID + """>...build your control here</div>"

On the browsers that support it, you’ll get a focus ring around the control with the tabindex set.

[quote=132534:@Greg O’Lone]Just set the tabindex to zero:

return "<div tabindex=""0"" id=""" + ControlID + """>...build your control here</div>"

On the browsers that support it, you’ll get a focus ring around the control with the tabindex set.[/quote]

Ok, I tried that but it still doesn’t get the tab when its suppose to.

Here’s the project if you want to take a look:
https://www.dropbox.com/s/qipvovcwrmbt8ky/spritesheet-2014-09-30.zip?dl=0

It also has almost complete WebSpriteButton class that’s pretty sweet. Just the tab order thing needs to get figured out.

Also I mistakenly filed this under Web. Can we move this to the WebControl SDK forum?

Is there any way to get or change the tab order during runtime currently?

If there was a function like GetNextControlId and GetPreviousControlId then using javascript we could help the control move the focus around properly.

[quote=132554:@Brock Nash]Is there any way to get or change the tab order during runtime currently?

If there was a function like GetNextControlId and GetPreviousControlId then using javascript we could help the control move the focus around properly.[/quote]
There is not.

Weird, I kind of have the tab order working now…
Just not when the control is disabled. When disabled I want the onFocus event to move focus instead to the next control, but I don’t know how to programmatically determine what control this is. Valid feature request?

How are you indicating to the DOM that your control is disabled?

Have you tried removing the tabindex attribute when your control is disabled?

By the way, looking at your project, you might want to put a unicode character in front of Render so user subclasses wont override the method. Something like:

?Render

[quote=132563:@Greg O’Lone]By the way, looking at your project, you might want to put a unicode character in front of Render so user subclasses wont override the method. Something like:

?Render

Good idea. I added it to the end though so that autofill still works :slight_smile:

Here’s the updated project with everything working now:
https://www.dropbox.com/s/geope90ymuliuwq/spritesheet-2014-09-30-2.zip?dl=0

Just set the Hidden attribute.
Sorry. Thought you wanted it to NOT appear :slight_smile:

Forum for Xojo Programming Language and IDE. Copyright © 2021 Xojo, Inc.