Salesforce LWC - error message when using querySelector on a datalist element

Question

I'm writing a lightning web component in which I have to assign a <datalist> element to one of my <input> elements' list property, in order to bind them.

For some reason, this JS line:

const streetsListId = this.template.querySelector('streetdatalist').id;

Throws this JS error message:

Cannot read property 'id' of null

Web component HTML:

<template>
    <div class="container">
        <input  id="inputstreet"
                name="inputstreet"
                type="text"
                list="streetdatalist"
                label="Search"
                onkeydown={onStreetChange}
                onblur={onStreetChange} />

        <datalist id="streetdatalist">
             <template for:each={streets} for:item='street'>
                 <option key={city.cityCode}>{city.cityName}</option>
             </template>
        </datalist>
    </div>
</template>

Web component JS:

renderedCallback() {
    if (this.initialized) {
        return;
    }
    this.initialized = true;

    const streetsListId = this.template.querySelector('streetdatalist').id;
    this.template.querySelector('inputstreet').setAttribute('list', streetsListId);
}

Koby Douek · Accepted Answer · 2019-12-17 08:40:46Z

2

Solved it by changing the querySelector with '[data-id=:

const citiesListId = this.template.querySelector('[data-id="streetdatalist"]').id;

answered Dec 17, 2019 at 8:40

Koby Douek

16.7k21 gold badges79 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Salesforce LWC - error message when using querySelector on a datalist element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related