Skip to content

Redesign the best class filter

Erwan Rouchet requested to merge best-class-filter into master

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

Edited by Erwan Rouchet

Merge request reports

Loading