Comments (12)
Good points all. Will tackle them as time permits.
from svelte-multiselect.
Tailwind released Comboboxes today! https://tailwindui.com/components/application-ui/forms/comboboxes.
I think we need to be inspired by them.
from svelte-multiselect.
They charge money for that? But sure, let's take what good ideas we can from them.
from svelte-multiselect.
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.
from svelte-multiselect.
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.
from svelte-multiselect.
I'm just surprised people pay £119 for a UI framework.
😄
Anyway this is for inspiration too: https://headlessui.dev/react/combobox.
from svelte-multiselect.
Here the svelte version: https://github.com/rgossiaux/svelte-headlessui, the Combobox porting is coming, only the select is available now.
from svelte-multiselect.
Just for later reference, this was due to
svelte-multiselect/src/lib/MultiSelect.svelte
Lines 404 to 406 in 33864be
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.
- 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.
- 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);
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.
- 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.
- 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?
from svelte-multiselect.
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.
from svelte-multiselect.
You mean 4, right?
from svelte-multiselect.
Oops, typo. Yes, I meant 4.
from svelte-multiselect.
Changes released in v4.0.1.
from svelte-multiselect.
Related Issues (20)
- Change liSelectedClass background color for each option HOT 1
- When allowUserOptions={true} user can't enter custom option if it is a substring of an existing option HOT 2
- Can't force svelte-multiselect box to not grow HOT 9
- Request textDocument/hover failed. Code: -32603 HOT 3
- CSS framework styles are overriden HOT 3
- Can't resolve './types' HOT 11
- The where classes are overwriting the classes I am giving through props. HOT 2
- Fire specific event if `allowUserOptions` was used to create a new option HOT 1
- Close dropdown after selecting option HOT 7
- on:removeAll returns empty array HOT 1
- Hiding dropdown while retaining focus on input, and having a placeholder after first selection
- How to make added values only as string with allowUserOptions? HOT 3
- Customizing user message <li> HOT 1
- Change event that doesn't conform to type HOT 2
- Tailwind css dark mode classes not picked up when passed as props. HOT 2
- Svelte 5 support? HOT 1
- Required doesn't reset when input has been invalidated HOT 1
- Typescript - Error: Property 'value' does not exist on type 'Option'. Did you mean 'valueOf'? HOT 6
- Options background not changing color in dark mode HOT 3
- Options not showing after calling focus on input HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-multiselect.