dripemail / much-select-elm Goto Github PK
View Code? Open in Web Editor NEWThis project forked from jachin/much-select-elm
A fancy select input written in elm, wrapped in a web component
This project forked from jachin/much-select-elm
A fancy select input written in elm, wrapped in a web component
Click on an option group label in the drop down menu cases the dropdown to flash.
The cursor should also change when hovering over opt group labels to an arrow to show the user that they can not click on them.
An even more complex example where
CustomOption
s are submitted to an API in addition to getting other options from an API (maybe we use local storage to make this work).When a new option is selected in mulit select mode, the UI tends to flash.
On the main page the "Async Loading Options" example is not working. Perhaps I should move it off the main page as well.
Right now I'm just using the "slotchange" event to update the options, but I should probably be using a MutationObserver.
If the <much-select>
has a selected-value-encoding=
set the value=
attribute in the hidden-value-input slot should be encode as well.
When an option is selected it should have a little delete button next to it, for removing it as a selected option
When trying address the issue of the initial multi selected values' order not being respected I introduced a bug where in single select mode the selected option would jump down to the bottom of the dropdown.
Disabled options are not showing up right, they should be visible, but not highlightable or selectable. They should probably look faded as well.
A nice event view for the demos. A little widgets that shows the relevant event firing, then automatically clearing.
the width of the dropdown should always track with the width of the element, it doesn't need to have a max size.
When an item is selected the dropdown should scroll to the selected item so it's visible.
Selecting an item and then moving it to the top of the Drop down might be what some people want. But I think the default behavior should be to keep the item in it's place in the list (we're talking about the single select drop down here)
Right now we are just using a comma separated value, but this is trouble if the much select value has a comma in it.
Let's add an attribute to specify how exactly the value gets "encoded" in the selected-value
attribute.
I'll bet we could write a nice unit test for this.
When searching for an option, if the user uses the up and down arrow buttons to move the selected option it is also moving the cursor in the text box to the beginning and end of of the text.
That shouldn't happen.
We need to support having a lot (in the light dom) that is a hidden input with a value that is reflected by the value of the <much-select>
, this will allow "traditional" form submissions to work.
There's a todo item in the dropdown-ordering.test.html
, we need to get that test working. There is probably something actually broken here.
When adding a custom option there's a bit of text to give the user a hint that they can "add" a new option, not just select from one of the given options. Make that text customizable.
When in multi select mode, we could (optionally) keep the options in the dropdown (in place) and just show them as selected in the dropdown (in addition to in the input).
The would probably be implemented with an attribute, I'm not sure what the default behavior should be.
The dropdown footer is made visible by an attribute, something like show-droppdown-fotter
.
The idea is that it's used with the max-drowpdown-items
attribute and with searching.
So if the user can only see some of the available options because there either isn't room or the search filter is hiding some of them it would say something like.
Showing 8 of 167 options
The idea here is this in an event that gets emitted when a <much-select>
is blurred AND it's value has changed. It should also get emmited if the value is changed without focusing the <much-select>
. I think the only way to do this now is with the clear button (in multi-select mode).
When adding an option there could be an additional field that is the order the options should be in when displayed in the dropdown.
This could be done with some sort of rank
or order
property.
Allow naked options in the dropdown.
<much-select>
<option>hello</option>
<option>hi</option>
<option>how are you?</option>
</much-select>
It looks like value changed events are being emitted on initialization. We don't want that, it's causing issues.
We should have tests for
Ensure content within boxes are equidistant so it's properly aligned. Right now in Storyboard, it is about 2px off on the left.
Additionally, text getting cut off field 5,6, and 8 in weird place
When the user is hovering over options in the dropdown the selected option should also get the highlighted
class.
Right now the way it's styled.. the element doesn't show up until the element is "ready".
If there are a lot of <much-selector>
s on the page it can take a few minutes... and there's "jitter".
Maybe there should be an optional slot that has a placeholder in it, that shows the selector in a disabled state. It's tricky because it will require external styling. But you probably want that anyway, to hide the select menu in the slot.
We need an example of the multi select with custom options.
Pressing the delete key should remove the last selected option.
We could also have an attribute to just always sort the options alphabetically.
This would need to support sorting them with in option groups.
This could be important with the <much-select>
is hooked up to an API and options are being sprinkled in as the user searches for the options they want.
When an option is chosen in mulit select mode it should go onto the list of chosen options in the order it was added.
When focused, clicking the close button would leave the dropdown stuck open.
When the clear button is press, if the much-select is focused it should refocus the input.
After the refactor in #37 we have lost the respect for max-dropdown-items="10"
When a user adds a custom option, do we want to make an api for validating and transforming it.
For instance, say you want to use this as a tag, and are going to allow the user to create new tags, but the tags should be lower case and have -
instead of spaces.
We could:
We might need a separate validation step where we disable the "Add ..." option in the dropdown unless it passes a validation method. Again, we could have support for custom validation or baked in validation... or both.
Things that need to be finished before this is done...
Add a boolean attribute called events-only=""
which will ensure the much-select
does not write to the light DOM and will rely on whatever is managing state to update the light DOM.
We have the following example, and it's not respecting the order of the selected-value.
<much-select multi-select="true" selected-value="Dory,Betta" selected-value-encoding="comma" allow-custom-options="true">
<select slot="select-input">
<option>Angelfish</option>
<option>Betta</option>
<option>Cod</option>
<option>Dory</option>
<option>Eulachon</option>
<option>Fangtooth</option>
</select>
</much-select>
Clicking on a selected option in mulit select mode should toggle it's highlighted state.
Pressing the delete button should delete any highlighted options.
If there's nothing in the filter field, using the arrow keys should move the course between the selected items.
Using the up and down arrows to highlight different options is not working quite right, it's not skipping options that are invisible.
There are several things I either know don't work, or probably don't work.
<option>
in the slot="select-input"
adding a selected attribute to one of them works, but removing a selected attribute does not.selected=
attributes should work in multi-select mode.These are tricky because the default behavior now is to preserver the selected values. Maybe that behavior can be toggled with an attribute.
There are a lot of ways we could make this more accessible. My current idea is to have a fallback rendering that can be triaged... somehow... that will render the widget, not as a single UI component but a set of native inputs.
When a much-select
switches between multi-select
and there's a selected-value
how do we want to handle that?
Seems like if there are multiple selected values, that should get pared down to 1 value, when switching to single select.
In multi select mode, as options are chosen they are removed from the drop down. The dropdown should have some sort of a state if there are no options.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.