3

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

2

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

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.