I am working on a lwc containing a dual listbox filled with queried contact values that I need. I am successful at retrieving all contact values.

The end user would like the first option of the contacts list automatically highlighted on component opening so that they only have to click on the arrow to select the value and move it to the right list. However I cannot figure out how to highlight that value. I have tried to trigger it from a button to debug the issue but I do not even know if I am doing it the right way. Here is the code I have written :


<template iterator:listpa={personAccounts}>
    <template if:false={isFromOpp}>
        <template if:false={isNoPersonAccountSelectable}>
            <lightning-layout-item key={listpa.value.practiceName}>
                <lightning-dual-listbox name="eventCtcIds"
                    label="Person Account (People you will meet)"
                    options={availableContacts} onchange={handleChange} size="3"
                    label="do select" variant="brand"


   let listElements = [...this.template.querySelectorAll('lightning-dual-listbox')];
   for(let item in listElements){
       listElements[item].selectedIndex = 0;


enter image description here

I would like the value "Richard Jones" to be highlighted upon component rendering (or upon button "do select" click to begin with).

Thanks for your answers


You can use focus method to set the focus on first value of the options like this

    <lightning-dual-listbox name="languages"
                            label="Select Languages"

                            field-level-help="Select your preferred languages"
    <div class="slds-box" >
        <p>Selected values are: {selected}</p>


import { LightningElement, track } from 'lwc';

export default class DualListboxSimple extends LightningElement {
    @track _selected = [];

    get options() {
        return [
            { label: 'English', value: 'en' },
            { label: 'German', value: 'de' },
            { label: 'Spanish', value: 'es' },
            { label: 'French', value: 'fr' },
            { label: 'Italian', value: 'it' },
            { label: 'Japanese', value: 'ja' },
renderedCallback() {

    get selected() {
        return this._selected.length ? this._selected : 'none';

    handleChange(e) {
        console.log('was here')
        this._selected = e.detail.value;

here is a playground https://developer.salesforce.com/docs/component-library/tools/playground/XdWvb5dZT/6/edit

| improve this answer | |
  • 1
    Thanks for you answer. I did not know about the renderedCallback. At first it did not work because my listbox is filled with values queried in a wired apex method so the querySelector was null but I noticed that after retrieving the values the renderedCallback was called again. So I just added a if (this.template.querySelector('lightning-dual-listbox') != null settlement and it worked fine. Thank you ! – Pierrot Apr 20 at 17:20

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.