2

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

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

1 Answer 1

3

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

2
  • 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
    Commented Apr 20, 2020 at 17:20
  • Thanks for the answer. I had the same issue and checked for null before setting the focus. Commented Jun 20, 2022 at 16:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .