0

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?

  • Hi Nate, and welcome to SFSE. What do you mean by "doesn't work"? what is rendering, what's the experience? – Sebastian Kessel Jul 17 at 20:46
  • Also, I see that stateOptions is not decorated. Have you tried adding a @track decorator? – Sebastian Kessel Jul 17 at 20:47
  • @SebastianKessel The input renders, but none of the options appear, so I just have an empty input element. – Nate Johnston Jul 17 at 21:17
  • Nate, Renji has the right answer below for you. I added a link to a potential solution, so you will probably want to explore that. – Sebastian Kessel Jul 17 at 21:18
0

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)

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.