Handle Focus in Lightning Web Components Salesforce | LWC Stack ☁️⚡️

Kapil September 16, 2022

 

Hello there, in this blog I will show you how you can handle focus in Lightning Web Components.

If you are thinking like hey this is very basic stuff as we know html and tabindex attribute in it very well, trust me you are wrong here. The way tabindex attributes supports in Lightning Web Components is completely different.

For tabindex property you can only set it to 0 and -1. By default browser will be having its own navigation sequence of elements but let's suppose if a element is not focusable like a container or a label in that case you may add tabindex=0 to add that element in queue.

On the other hand if you would like to remove an element from the series of focused elements than you just have to add tabindex=-1 on the specific element.

Using tabindex you can make your component accessible to people with disabilities, program them to handle which element has focus and can receive input.

To demonstrate this functionality I have created three example below, please check the code and output below.


Example 1: Child without focus

In below example I am shifting the focus from an element in Parent component to another element in Child component. But the child component will not be having any focus.


parentFocus.html

1
2
3
4
5
6
7
8
9
<template>
  <lightning-card title="Child without focus" icon-name="utility:user">
    <div class="slds-var-m-around_medium">
      <button>Button</button>
      <br /><br />
      <c-child-focus></c-child-focus>
    </div>
  </lightning-card>
</template>


ChildFocus.html

1
2
3
4
5
6
7
<template>
  <span
    >Tabbing to the custom element moves focus to the input, skipping the
    component itself.</span
  >
  <br /><input type="text" />
</template>


Example 2: Child with focus

In below example I am shifting the focus from an element in Parent component to Child component(container) first and then on its elements.


parentFocusTabIndex.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<template>
  <lightning-card title="Child with focus" icon-name="utility:user">
    <div class="slds-var-m-around_medium">
      <button>Button</button>
      <br />
      <br />
      <c-child-focus-tab-index tabindex="0"></c-child-focus-tab-index>
    </div>
  </lightning-card>
</template>

Note : For child component you can use the same Example 1.


Example 3: Delegates Focus

When creating custom components that contain focusable elements, you might find yourself managing tab indexes or setting focus manually on these elements. To manage focus automatically, set delegatesFocus to true.


parentFocusDelegates.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
  <lightning-card title="Parent with Delegates Focus" icon-name="utility:user">
    <div class="slds-var-m-around_medium">
      <button>Button</button>
      <br />
      <br />
      <label>Test Label </label>
      <br /><input type="text" />
    </div>
  </lightning-card>
</template>


parentFocusDelegates.js

1
2
3
4
5
import { LightningElement } from "lwc";

export default class ParentFocusDelegates extends LightningElement {
  static delegatesFocus = true;
}



Output


Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments