For example, the list of options is "Foo", "Bar", and "Baz". At the bottom of the list (always at the bottom) the user sees "Add..." as a new option. When she selects that option, the <select>
disappears, replaced in place with a focused <input type="text">
ready to accept a new option. It's important to note that this pattern is only usable in cases where the input is stored as a string, and you want to enforce a limited but extensible vocabulary of options. A possible example of this is colors, where you don't want to just let people enter anything, otherwise you would end up with "Gray" and "Grey" and possibly "grey".
app/javascripts/controllers/combo_controller.js
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ['picker'];