As Lightining components supports majority of html5 tags I have used the below code in lightning component code but it doesn't get shown in UI properly, The picklist options from data list is not shown at all

Choose a browser from this list

<input list="browsers" name="myBrowser" />
<datalist id="browsers">
    <option value="Chrome" />
    <option value="Firefox"></option>
    <option value="Internet Explorer"></option>

is it like that this tag is unsupported in lightning component or I am missing something important to include. Is there is any easy way to have a text box + drop down in lightning component that shows similar functionality


After some research came to know that list attribute is not supported in input tag when used in Lightning component. To make it work we can add the list attribute in input text from within the renderer JS My this code works fine now

<aura:component >
   <label>Choose a browser from this list</label>

    <input aura:id="acctlistInput" />
    <datalist id="acctlist">
        <option value="Chrome" />
        <option value="Firefox"></option>
        <option value="Internet Explorer"></option>


and in renderer JS I added the list attribute in input text

afterRender : function(component, helper) 
      var acctlistInputCmp = component.find("acctlistInput");
      var acctlistInput = acctlistInputCmp.getElement();
      acctlistInput.setAttribute("list", "acctlist");
      return this.superAfterRender();
  • Hi Monalisa. The same was suggested by CodeyInTheCloud, can you mark the same as the answer? Dec 23 '18 at 10:48
  • 3
    No its not the same.. Please read his answer again Dec 24 '18 at 5:01
  • Which lifecycle hook needs to be used for this in the LWC? I've tried the constructor, connectedCallBakc, and renderedCallback. The last one is the only one in which this.template.querySelector doesn't complain about the element not existing but it still doesn't populate the list. Thanks for your help in advance! 🍻
    – Bahman.A
    Jan 12 at 22:30

This might not be the answer you're looking for, but data lists are supported according to the salesforce documentation. But I wasn't able to make them work either.

Supported HTML Tags :The HtmlTag enum in this open-source Aura file lists the supported HTML tags. Any tag followed by (false) is not supported. For example, applet(false) means the applet tag isn't supported. In the above source datalist enum is not false. So technicaly it is supported.

As an alternative you can build your own lightning:combobox leveraging slds combobox to your need

  • would you please elaborate more on how to do this using the Combobox leveraging slds? maybe a link to some implementation? Thanks!🍻
    – Bahman.A
    Jan 12 at 22:32

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.