5

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>
</datalist>

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

Improve this question
0

2 Answers 2

Reset to default
4

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>
    </datalist>

</aura:component>

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
3
  • Hi Monalisa. The same was suggested by CodeyInTheCloud, can you mark the same as the answer?
    – Pranay Jaiswal
    Dec 23, 2018 at 10:48
  • 3
    No its not the same.. Please read his answer again
    – Monalisa Das
    Dec 24, 2018 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, 2021 at 22:30
1

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
1
  • 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, 2021 at 22:32

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .