Highlight first option of lightning-dual-listbox

Question

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 :

HTML

<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"
                    value={listpa.value.eventCtcIds}
                    required>
                </lightning-dual-listbox>
                <lightning-button
                    label="do select" variant="brand"
                    onclick={handleClick}></lightning-button>
            </lightning-layout-item>
        </template>
    </template>
</template>

js

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

render

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

Answer 1

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

<template>
    <lightning-dual-listbox name="languages"
                            label="Select Languages"
                            source-label="Available"
                            selected-label="Selected"


                            field-level-help="Select your preferred languages"
                            options={options}
                            onchange={handleChange}></lightning-dual-listbox>
    <div class="slds-box" >
        <p>Selected values are: {selected}</p>
    </div>
</template>

JS

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() {
this.template.querySelector('lightning-dual-listbox').focus();

}
    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