Remade Select 2 into a searchable select

[conorgolden1]

filter.webm

This is for issue #1152

[mkst]

I think this could use a little more love - for example, the user can write/select a preset that doesn't exist, but it doesn't appear to clear the preset id.

[conorgolden1]

Help me out here. How can the user write/select a preset that doesn't exist. Do you mean that the user should be able to directly write in their needed option and then it would set the preset id? I implemented the input element to be a search filter rather than something you can directly input your required option. Is that the functionality you are looking for?

[mkst]

I don't know whether it's just me on Chrome, but I can type anything into this box and navigate away, and it doesnt default back to e.g. Custom, or clear the preset id (just silently keeps the original value)

I just tried on my phone and it's the same - but I also noticed this (just set Chrome to phone mode on my laptop for the screenshot)..

[marijnvdwerf]

Question, what dropdown really needs this? And can't we solve the problem by grouping instead? (e.g. by active/inactive projects).

Using an <optgroup>

<select id="dino-select">
    <optgroup label="Theropods">
        <option>Tyrannosaurus</option>
        <option>Velociraptor</option>
        <option>Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option>Diplodocus</option>
        <option>Saltasaurus</option>
        <option>Apatosaurus</option>
    </optgroup>
</select>

Using a <hr>

<select id="dino-select">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
    <hr>
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
</select>

[ethteck]

Those changes to the compilers dropdown look good, though it'd take some backend modifications to group by category and send that info over with the compiler metadata. So I think that'd best be done in a future PR

As for the presets dropdown, I think having it searchable is totally ideal. There's so many active projects at any given point, and I also don't think it's our place to classify projects as active or inactive

[ethteck]

Okay I finally got around to testing this, sorry for the delay. It's looking good, but I'm seeing a few issues

• I can go to the Custom preset, then in the box type "Mari" and then click away and "Mari" stays in the box
• The down arrow key doesn't navigate from the input box to the actual choices, requiring you to click on the choice - it'd be nice if you could just down arrow to it
• Similarly, pressing the down arrow key on the compiler selection scrolls down on the page instead of choosing items in the list
• Similarly (the sequel), using the scroll wheel on the compiler selection box scrolls the page instead of the items in the list

[ethteck]

we may wanna use something like https://react-select.com/