Is there a way to setup a “tab order” in perspective. I have 20 some numeric entries on a page and when I press tab I jump all over the place. I tried adding a prefix to each components name (0-26_ComponentName) but that didn’t seem to help either. Is there any way to do without having to restructure everything I already have?
Thanks,
Pretty sure that sets up the DOM.
I guess you could use focus and blur events.
But, it probably is quicker to just refactor it and put it in the correct order.
There is an open feature request to configure this, but the current approach is to manipulate the z-index of input components such that they are in the order you want the tabbing to follow. Long-term we will most likely introduce something like Component.meta.tabIndex which would allow for specifying the order of components.
Thanks, I will look into the z-index and see if I can make it work.
Did the z-index work? if yes, could you explain?
No, I never got it working. I haven’t put much time into it since I originally asked but it never worked as I intended. It hasn’t been priority enough for me to revisit again.
@cmallonee Any update on ETA on this? I’ve got a heavy form based application and the end user is asking for better control of tabbing through the form when entering data.
It is still in the incubation phase, and so I would not expect it in the next couple of releases.
@cmallonee do you know of a reliable work around? Even if it is hacky I’d be willing to try it.
I don’t think there is one. tabIndex is an HTML attribute on each node; you can’t even customize it via CSS.
If I remember correctly, the tabbing from one component to the next is predicated by their order in the project browser, so if you’re using a coordinate container you can just place all of the input components as the last components in their respective level. If you’re not using a coordinate container, or you have nesting going on, then there’s nothing you can do as of right now.
OK Thanks for the ideas.
I’ll try the coordinate container and see if that help out. Right now it is a flex container so that makes sense on why it might not be working.
Just checking in to see if there has been any change on this?
No, no change.
OK thanks. I’ll let my customer know.
z-order manipulation does work.
assuming your controls are in the same container.
This was done using 3 control types; radio group, text fields and buttons.
After the components are in the correct locations in your view, left click on the first one, right click, bring to front. left click on the next control in the 'order', right click, left click bring to front. Repeat.
if you're binding any of the visibilities to tags or expressions, the tab stop is still honored even if the control is invisible. the ux is focus disappears until tabbing goes to the next visible control.
Although not perfect, this does put some order into the user experience of tabbing.
I was having a similar problem as the OP. This worked well enough for me on my small project. Thank you for the clear instructions.
Z-order manipulation does work within the confines of a singular Coordinate Container. The ability to specify a tab index as part of the meta category of a component was added in 8.1.39, and so that route should be used going forward.