Redesign the best class filter
Closes #641 (closed)
This is quite a mess. The dropdown now simultaneously is a dropdown, a select and an input, but since it is not actually a <select>
or an <input>
, some extra CSS was required.
The dropdown itself, not just the dropdown-trigger
, has been made clickable; otherwise, the arrow on the right or any place other than the text would not be clickable. This however makes the contents of the dropdown close on click, which makes it impossible to use the text input as you need to click in it first. The v-on:click
on SearchableSelect
has therefore been modified with .stop
to prevent its click event from propagating to the dropdown and closing the dropdown early.
To allow closing the dropdown anytime the user clicks outside of it, just using the same event listener technique as for #637 (closed) caused clicking on the No best class
or Any best class
options not work because the listener would close the dropdown before the option change gets registered; v-on:click.stop
was therefore also added to all the other options of the dropdown.
TL;DR: reimplementing browser features is hard