How to set tabindex for inputNumberSlider?

[ericford]

Setting the tabindex attribute on the rich:inputNumberSlider does not appear to work.  I have a simple form with a selectOneMenu, commandButton, and inputNumberSlider, in that sequence.  I have the SelectOneMenu tabindex set to "1", the commandButton tabindex set to "2" and the inputNumberSlider set to "3".  With focus on the selectOneMenu, hitting Tab moves to the commandButton, as expected; hitting Tab again does not move to the adjacent inputNumberSlider.  Instead, it moves to the first focusable element on the page.  Repeatedly hitting the Tab key eventually moves focus to the inputNumberSlider's input window but not before passing through all intervening page elements.  I've examined the rendered output using Firebug and cannot see where the tabindex value set for that control is even applied.  Any help understanding how this is supposed to work would be appreciated.

[ppitonak]

Hi Eric,

it works fine for me. Could you please write which version of RichFaces and which browser do you use?

Regards,

Palo

[ericford]

Using RF 3.3.3 Final and FF 3.6.

[ppitonak]

Hi Eric,

I can reproduce it with 3.3.3.Final. The tabindex attribute is not rendered at all so it will not behave correctly in any browser. You can create an issue in our Jira (https://issues.jboss.org/browse/RF). Since all development is focused on RichFaces 4 and there are no plans for other RichFaces 3.x releases, you should consider migration to RichFaces 4.

Regards,

Palo

[ericford]

Pavol,

Thanks very much for the follow-up.  I have been considering migration but may be too close to my delivery date with some other even more significant issues to resolve first.  That migration may have to wait for a later release.

Regards,

Eric

[ericford]

Someone suggested I might be able to achieve the needed results using a jQuery tag to add the tabindex attribute directly.  I have only just started delving into jQuery and would appreciate any tips regarding if/how this could be done before I spend a lot of time getting up to speed (especially if this idea is not a workable one).

[esford]

I added the following tag but haven't had any luck getting it to work:

<rich:jQuery selector="document" query="ready(function(){$('myForm:maxNumberInput').attr('tabindex', '6')})"/>

I've verified that my selector is picking the correct input.  Changing the tag to: 

<rich:jQuery selector="document" query="ready(function(){alert($('myForm:maxNumberInput').value)})"/>

produces the expected alert box with the default value from the input.  However, the call to ".attr" appears to have no effect.  I tried it with ".prop" as well, with the same result.

[ericford]

My error - the jQuery approach works if you use the correct selector:

<rich:jQuery selector="document" query="ready(function(){$('myForm\\:maxNumberInput').attr('tabindex', '6')})"/>

I forgot the "\\" required for the ":" literal in the id.  It also works if I add "prependId=false" to the form tag and just use the component id:

<rich:jQuery selector="document" query="ready(function(){$('maxNumberInput').attr('tabindex', '6')})"/>