search

janosh / svelte-multiselect

Keyboard-friendly, accessible and highly customizable multi-select component
https://multiselect.janosh.dev
MIT License
279 stars 34 forks source link

What about a more generic/standard UX? #44

Closed frederikhors closed 2 years ago

frederikhors commented 2 years ago

What do you think about having a more generic/standard UX like https://primer.style/design/components/autocomplete?

In this issue I can summarize all the graphic quirks that are ugly to look at and require manual labor in each project:

  1. As you can see from the picture here: the font of the "placeholder" is very bad. Too big compared to other selects I am using right now. issue

  2. When you select an item and then delete it you can see that the seelct increases in height, even if only by 1px is very annoying.

  3. The rounded border is too much.

  4. If I click on a label for that select each time I click the dropdown is faded away... I think this is useless. issue

  5. I would like to have another (more classical) animation for hover on list voices. Not the actual which is not really suitable for those with vision problems because it moves every single item to the right. I think a simple background color on:hover is enough.

  6. As you can see in the same gif the gray background is not aligned in the select content.

janosh commented 2 years ago

Good points all. Will tackle them as time permits.

frederikhors commented 2 years ago

Tailwind released Comboboxes today! https://tailwindui.com/components/application-ui/forms/comboboxes.

I think we need to be inspired by them.

janosh commented 2 years ago

They charge money for that? But sure, let's take what good ideas we can from them.

frederikhors commented 2 years ago

They charge money for that? But sure, let's take what good ideas we can from them.

Yes, they do charge. But I don't mean we have to pay. Just get the best out of their work. Inspiration.

janosh commented 2 years ago

Yes, they do charge. But I don't mean we have to pay. Just get the best out of their work. Inspiration.

I know, I understood that. I'm just surprised people pay £119 for a UI framework.

frederikhors commented 2 years ago

I'm just surprised people pay £119 for a UI framework.

😄

Anyway this is for inspiration too: https://headlessui.dev/react/combobox.

frederikhors commented 2 years ago

Here the svelte version: https://github.com/rgossiaux/svelte-headlessui, the Combobox porting is coming, only the select is available now.

janosh commented 2 years ago
  1. As you can see from the picture here: the font of the "placeholder" is very bad. Too big compared to other selects I am using right now. issue

Just for later reference, this was due to

https://github.com/janosh/svelte-multiselect/blob/33864bed990c97711c7d53dd1aa82af6481d7a9d/src/lib/MultiSelect.svelte#L404-L406

which was added to stop Safari from zooming in on this component when user focuses the input. People who encounter this problem and want to prevent Safari's zoom behavior will have to increase font size themselves, I guess.

  1. When you select an item and then delete it you can see that the seelct increases in height, even if only by 1px is very annoying.

Can you post a GIF of this? I can't reproduce it.

  1. The rounded border is too much.

Default border-radius changed from 5 to 3 pt.

- border-radius: var(--sms-border-radius, 5pt);
+ border-radius: var(--sms-border-radius, 3pt);
  1. If I click on a label for that select each time I click the dropdown is faded away... I think this is useless. issue

This is hard to fix. The component closes itself when it detects the user clicked anywhere outside itself. The form label is outside but then default browser behavior is focus associate input of form label so MultiSelect immediately regains focus and calls setOptionsVisible(true), triggering the animation. We would have to check the click was outside and not on a form label with the same ID. Can be done but seems brittle and asking for trouble.

  1. I would like to have another (more classical) animation for hover on list voices. Not the actual which is not really suitable for those with vision problems because it moves every single item to the right. I think a simple background color on:hover is enough.

I agree. Thought about making this change a few times myself but wasn't quite motivated enough. It's done now.

  1. As you can see in the same gif the gray background is not aligned in the select content.

I think this is fixed already, no? If not could you share another screenshot of what you mean?

janosh commented 2 years ago

I think #52 fixes all the points here except 5 which I'm marking as wontfix unless someone knows a good way of not triggering focusout callbacks if the click event target is the form label belonging to the input that just lost focus.

@frederikhors If there's anything I missed here besides 4, feel free to open a new issue.

frederikhors commented 2 years ago

You mean 4, right?

janosh commented 2 years ago

Oops, typo. Yes, I meant 4.

janosh commented 2 years ago

Changes released in v4.0.1.