[SalesForce] Populate datalist dynamically using Lightning Web Components

I am trying to populate a datalist dynamically using declarative HTML. The idea is using a datalist to pick states, but also have the user be able to type into the input so narrow the results. A <datalist> was the path of least resistance, yet I am running into some issues.

Below is my basic template structure.

HTML

<input list="stateSelection">
<datalist id="stateSelection" class="stateList">
  <template for:each={stateOptions} for:item="state">
    <option key={state.id} value={state.value}>{state.label}</option>
  </template>
</datalist>

JS

Below is my basic javascript.

export default class RadioGroupBasic extends LightningElement {

    stateOptions = [
        { label: 'Alabama', value: 'AL', id: 'AL' },
        { label: 'Alaska', value: 'AK', id: 'AK' },
        { label: 'Arizona', value: 'AZ', id: 'AZ' },
        { label: 'Arkansas', value: 'AR', id: 'AR' },
        { label: 'California', value: 'CA', id: 'CA' },
        { label: 'Colorado', value: 'CO', id: 'CO' },
        { label: 'Connecticut', value: 'CT', id: 'CT' },
        { label: 'Delaware', value: 'DE', id: 'DE' },
        { label: 'Florida', value: 'FL', id: 'FL' },
        { label: 'Georgia', value: 'GA', id: 'GA' },
        { label: 'Hawaii', value: 'HI', id: 'HI' },
        { label: 'Idaho', value: 'ID', id: 'ID' },
        { label: 'Ilinois', value: 'IL', id: 'IL' },
        { label: 'Indiana', value: 'IN', id: 'IN' },
        { label: 'Iowa', value: 'IA', id: 'IA' },
        { label: 'Kansas', value: 'KS', id: 'KS' },
        { label: 'Kentucky', value: 'KY', id: 'KY' },
        { label: 'Lousiana', value: 'LA', id: 'LA' },
        { label: 'Maine', value: 'ME', id: 'ME' },
        { label: 'Marryland', value: 'MD', id: 'MD' },
        { label: 'Massachusettes', value: 'MA', id: 'MA' },
        { label: 'Michigan', value: 'MI', id: 'MI' },
        { label: 'Minnesota', value: 'MN', id: 'MN' },
        { label: 'Mississippi', value: 'MS', id: 'MS' },
        { label: 'Missouri', value: 'MO', id: 'MO' },
        { label: 'Montana', value: 'MT', id: 'MT' },
        { label: 'Nebraska', value: 'NE', id: 'NE' },
        { label: 'Nevada', value: 'NV', id: 'NV' },
        { label: 'New Hamshire', value: 'NH', id: 'NH' },
        { label: 'New Jersey', value: 'NJ', id: 'NJ' },
        { label: 'New Mexico', value: 'NM', id: 'NM' },
        { label: 'New York', value: 'NY', id: 'NY' },
        { label: 'North Carolina', value: 'NC', id: 'NC' },
        { label: 'North Dakota', value: 'ND', id: 'ND' },
        { label: 'Ohio', value: 'OH', id: 'OH' },
        { label: 'Oklahoma', value: 'OK', id: 'OK' },
        { label: 'Oregon', value: 'OR', id: 'OR' },
        { label: 'Pennsylvania', value: 'PA', id: 'PA' },
        { label: 'Rhode Island', value: 'RI', id: 'RI' },
        { label: 'South Carolina', value: 'SC', id: 'SC' },
        { label: 'South Dakota', value: 'SD', id: 'SD' },
        { label: 'Tennessee', value: 'TN', id: 'TN' },
        { label: 'Texas', value: 'TX', id: 'TX' },
        { label: 'Utah', value: 'UT', id: 'UT' },
        { label: 'Vermont', value: 'VT', id: 'VT' },
        { label: 'Virginia', value: 'VA', id: 'VA' },
        { label: 'Washington', value: 'WA', id: 'WA' },
        { label: 'West Virginia', value: 'WV', id: 'WV' },
        { label: 'Wisconson', value: 'WI', id: 'WI' },
        { label: 'Wyoming', value: 'WY', id: 'WY' },
        { label: 'District of Columbia', value: 'DC', id: 'DC' }
    ];
}

Yet this doesn't work for creating <option> tags. Is there something I am doing wrong?

Best Answer

You cant use id selectors in LWC - ids are modified at runtime by the framework. Therefore you can`t use html5 datalists (because the input uses an id selector and will not find the element) and you need to build a custom one

Edit: As highlighted by Sebastian you could potentially use a workaround by setting the list value manually to the element id as described here. (I personally would be cautious though because such workarounds always hold the risk of quirks as you are now responsible for rehydrating the template and values by your own)

Related Topic