3

I recently added tabindex's to lightning components, I noticed that it doesnt really behave as desired. Example, I have the following form:

<lightning:select tabindex="1" .../>
<lightning:select tabindex="2" .../>
<lightning:input tabindex="3" .../>
<lightning:formattedUrl .../> <!--skip-->
<lightning:textarea tabindex="4" ../>
lightning:radioGroup tabindex="5" ../>

for the text area and radio group components, instead of focusing on the input field, it focuses on the whole component, and user is unable to type when it is focused upon: enter image description here

Is it possible use tabindex on the lightning:textarea (and or radio group) and have the actual textfield focused for users to type in? (or change radio buttons)

I know that I can skip the formattedUrl if I set the tabindex to a very high number.

2
  • 1
    Can you clarify a bit on this -- [Is it possible to add the tabindex on the textarea rather than the component itself] -- 1. does textarea and component refer to lightning:textarea or 2. component here refers to your overall custom component where the textarea component is embedded or 3. with textarea, you are referring to the "rendered" text area while using lightning:textarea?
    – Jayant Das
    Nov 8 '18 at 17:55
  • changed the wording - indeed, it was confusing.
    – glls
    Nov 8 '18 at 18:13
2

Here's what I observed while doing a quick test.

If I used text area fields in my component, as you mentioned, tabbing it just highlights the component and does not "focus" the cursor within the actual text area of the component.

However, if you keep on tabbing further, it does place the cursor within the text area, though this is not a feasible option as you cannot ask Users to keep on tabbing!


What I found is that lighntning:textarea (and lightning:radioGroup) supports onfocus function. Once I did something as below, upon tabbing, I was directly able to place the cursor within the text area (as you need). It’s kind of odd that it works upon “re-enforcing” the focus on the onfocus event!

So, I declared my textarea with a tabindex as below, by additionally providing an Id to the component and introducing an onfocus function.

<lightning:textarea tabindex="2" aura:id="txt1" onfocus="{!c.onTxt1Focus}" />

And within my JS, the code looked as below:

onTxt1Focus : function(component, event, helper){
    component.find("txt1").focus();
},

And it just worked!

2
  • nice - indeed this also works =)
    – glls
    Nov 9 '18 at 1:36
  • Yeah it just works, but its more like "re-enforcing" the focus back on the onfocus event :)
    – Jayant Das
    Nov 9 '18 at 2:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.