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();
| improve this answer | |
  • Hi Monalisa. The same was suggested by CodeyInTheCloud, can you mark the same as the answer? – Pranay Jaiswal Dec 23 '18 at 10:48
  • 3
    No its not the same.. Please read his answer again – Monalisa Das Dec 24 '18 at 5:01

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

| improve this answer | |

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.