Re-work dropdown selectors to typeahead inputs

[kevmodrome]

The current dropdown selectors aren't very functional at the moment. I'd love to switch these out for an input element with typeahead completion.

Requirements:

• Make the dropdowns into text fields
• Add a label above
• Make sure there's an arrow that indicates there are options that show up once you click it
• Use the same styling if possible
• Filter the options as you type in the input field

Here's an example of a variation of this: https://codepen.io/hmps/pen/FzIsu -

Up for grabs if anyone wants to try sorting this one out.

[paolotiu]

Hey! I'm interested in working on this. To make it clear the dropdown selectors you're referring to are the tag selectors?

[kevmodrome]

Awesome! Throughout the site on some pages you'll see these filter buttons at the top of the page. If you hover on these you'll see lists of tags, etc. These should be switched out to the new style

[kevmodrome]

For reference, these are the ones I'm talking about. There are more of them on other pages as well, all of them need switching out of course.

[paolotiu]

Got it, thanks! I'll try to do it within the next few days

[MacFJA]

Yeah, the "design" solution I made that times is not ideal (nor beautiful) 😅

[paolotiu]

By the way, should I use plain css or tailwind?

Related: #88

[kevmodrome]

I think that's still up for discussion, most likely we're going to go with plain old CSS.

Edit: We are going with plain old css. Don't worry about not using the correct custom props for now, since they don't exist yet.

[paolotiu]

Oh okay, I see, thanks!

One more thing, I found this library, svelte-select, that seems to have the desired outcome?

Here's an example they have: https://svelte.dev/repl/3e032a58c3974d07b7818c0f817a06a3?version=3.20.1

I think the Multi example is applicable to our situation?

[kevmodrome]

Yes! This looks perfect! If we just wrap it in our own component that implements a label feature I think we're good to go. We also have to make sure the functionality still works, of course.

[paolotiu]

Great! Thank you so much!

[paolotiu]

Does the sorting component not work for you also when ran in dev mode? But, when built and in preview, it works.

Here's a pic of the broken dev sort:

I want to know if this is only for me. I think this bug also affects svelte-select since it doesn't work in dev mode, but magically works when built.

One more thing, I tested svelte-select in another sveltekit project and it seemed to work there. Very weird never encountered this.

[ambarvm]

@paolotiu I have the same bug in dev mode.

[paolotiu]

Yeah really weird, I'll try to investigate a bit more.

[paolotiu]

Found the problem!

it's at src/lib/stores/metatags.ts.

Originally it imports the type with the function like this.

import { Writable, writable } from 'svelte/store

Apparently, vite doesn't like that and proceeds to break stuff. This only happens in dev because when built, all type imports are removed.

Here's the fix:

import type { Writable } from 'svelte/store';
import { writable } from 'svelte/store';

[kevmodrome]

Thanks @paolotiu 🧡

[paolotiu]

Thanks @kevmodrome! Looking forward to more contributions.

Also, loving the podcast!