[Bug] Sort dropdown generates invalid URLs

[ja1den]

Description

Currently, changing the sort order results in an invalid URL.

This means if the page is reloaded, it is reset to an empty search.
As a result, bookmarking a search impossible.

I think this also means changing the sort order sometimes doesn't work in normal use either (i.e., without reloading).

Steps to Reproduce

1. Navigate to https://search.nixos.org/options.
2. Enter a search term (e.g., boot.loader.systemd-boot).
3. Change the sort order.
4. Notice the # before the ? in the URL.
5. Reload the page. It should now show an empty search.
6. Delete the # in the URL.
7. Reload the page again. It should now show the previous search, albeit still sorted by relevance.

Potential Solution

This issue is caused by the href="#" attribute on the links (a) rendered in the dropdown.

It should be able to be fixed by:

• changing the attribute to be href="javascript:;"
• suppressing the default behaviour of the links with event.preventDefault()¹.

For reference, the offending line is here.

If I have time today, I'll make a PR with the fix.

Footnotes

1. https://stackoverflow.com/a/48447130 ↩

[ja1den]

Doing a little more testing, it seems like there more places where # is used and results in an invalid URL.

I'll try to get them all in my PR.

[ja1den]

I tried switching # to javascript:;, but Elm seems not to like it, reporting:

This is an XSS vector. Please use ports or web components instead.

I then tried to do the equivalent of event.preventDefault(), but couldn't get it to work.
It seems like switching onClick to onClickStop should work, but the behaviour persists either way.

I don't have enough experience with Elm to progress any further.

For whoever looks at this next, I found that the bug manifests differently when running locally.
Instead of having a # appear in the URL, the # is written to the end of the URL, all of which is then overwritten by a valid new one.
This manifests as two history entries. It's also possible to see the # appear briefly.
This means the bug only has symptoms in production, which is likely why it wasn't caught.