dripemail / much-select-elm Goto Github PK

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

• new 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).
• Make sure that an initial value works, even when that same option comes from the API.
• Options (from the API) should include descriptions.

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.

• message that show up then disappear.
• color coded messages
• Looks nicer

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

• getAllOptions
• selectOption
• deselectOption
• removeOptions
• removeOption
• addOptions
• addOption
• updateOptions

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:

• have some sort of a callback, where the user needs to validate and transform the user entered value
• have some commonly used validations and transformation baked in and additional options would require extending the web component

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...

• Toggle the allow custom attribute flag while keeping the transformation and validation
• When in dataset output mode only to the transformed value on blur
• When in custom html output mode if an error message should be visible to for a custom option show the message in the description of the custom option. The custom option should also be disabled.

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.

Right now we are showing a bunch of partial matches.

We're doing this:

Maybe we should just be showing this:

Perhaps we could configure this with an attribute.

There are several things I either know don't work, or probably don't work.

• If there's a list of <option> in the slot="select-input" adding a selected attribute to one of them works, but removing a selected attribute does not.
• Adding multiple 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. 🤔 I don't really like that idea.

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.