Simple dropdown navigation

[Stef De Geest]

On a project I'm working I use a dropdown menu as a way to filter the shown content. However I want to transition to the corresponding page using highway transitions.

HTML
<select class="project-filter uppercase select-styling bg-transparent" name="selectProj"> <option value="/projects">Toon alles ({{craft.entries.section('projects').all()|length}})</option> {% for category in craft.categories.group('projectCategories').all() %} {% set results = craft.entries.section('projects').relatedTo(category) %} <option value="/projects/{{category.slug}}" {% if category.slug == craft.app.request.getSegment(2) %} selected {% endif %}>{{category.title}} ({{results|length}})</option> {% endfor %} </select>

JS
checkFilter() { this.filter.addEventListener('change', (e) => { const link = e.target.value; this.H.redirect(link); }); }

This way it goes to the correct page however, it does not transition. When I specifically add my custom DefaultTransition this.H.redirect(link, DefaultTransition); it shows me the following error:

When I try to use a contextual transition such as 'ProjectTransition' it returns the same error. I have no clue as to what could be causing this issue.

EDIT: I can give in a contextual transitions name (instead of the actual transition). However this does not initiate the animations that are being expected from that transition and simply loads the page regularly.

EDIT EDIT: The link I was giving was something like '/projects/name' but it had to be the full URL including http / https in order to make it work. Ofcourse I had to reinitialize the function on every navigation.