How can I create an editable select control (dropdown the user can add new values to)? [closed]

Question

I need to display a dropdown in a lightning component, but I also want the user to be able to add items to it. So far I'm not seeing this ability in either the ui:inputSelect or the lightning:select. Any advice?

Answer 1

You can use ui:inputSelect and set the options attribute. When this attribute is set, the input will automatically update the list with the new options.

You can see an example here under the "Generating Options Dynamically" section. In this example they set the options attribute in the init handler like so:

({
    doInit : function(cmp) {
        var opts = [
            { class: "optionClass", label: "Option1", value: "opt1", selected: "true" },
            { class: "optionClass", label: "Option2", value: "opt2" },
            { class: "optionClass", label: "Option3", value: "opt3" }

        ];
        cmp.find("InputSelectDynamic").set("v.options", opts);
    }
})

For your case, instead of setting options in the init handler you can get, modify, and re-set the options attribute based on user input.