Fix arrow navigation behavior of custom select

What this does

While working on an unrelated feature for Perma, I noticed that the behavior of the custom select, that allows users to choose a destination for their next Perma capture, had a bug.

Users could select any option just fine using a mouse, but attempting to navigate past the first option in the list of select options using the down arrow threw a console error. This likely happened when the custom select was slightly refactored — and folders began being passed to the component as a prop rather than being managed internally as a reactive ref.

Reference Screenshot

How to test

To test this, you will need to toggle the vue-dashboard flag. All django waffle flags can be toggled with a url, with the following pattern: https://perma.test:8000/manage/create?dwft_FLAG-NAME=1
Try to reveal the select menu by hitting return while the select parent is focused.
Try navigating to a menu option that is not first. You should be able to navigate to the last option using just the down arrow key, or navigate back up using the up arrow.

Additional notes

After fixing this, I double-checked that other keyboard behaviors still worked as expected as well:

Hitting escape should close the options menu
Hitting home or end should navigate to the first and last options, respectively
Clicking outside the select additional works as expected as well.
While using the arrow keys, the options should not cycle from the last item to the first item (or vice versa), per typical select behavior.
Tab should also not cycle to the next option.

harvard-lil / perma