Context

Currently there is no contributing specific information on the project which might cause friction for some folks that want to make some changes to the project.

Proposed solution

• Create a CONTRIBUTING.md
• Include detailed instructions to run the project.

Context

Setting the async modifier to True renders a loading svg in the control as well as shows a loading menu when there are no matched items. There seems to be some menu styles applied which makes the loading menu look weird.

Context

When hovering over multi select tags a hover ring appears on it. This doesn't really make sense as it suggests the tag itself is clickable.

Proposed solution

• Remove the hover state from the tag view

Context

The README has a section on un-styling the Select view for consumers not using elm-css. This requires consumers to have elm-css as a direct dependancy simply to un-style it.

Proposed solution

Expose an unStyled function the does this mapping from within the package. This avoids the consumer needed the direct dependancy.

Context

The list item styles are currently not configurable.

Work to be done

Add the menu item styles to the Styles module.

There currently is no multi native variant. This multi native variant would work well for a native multi select experience especially on phones.

Investigation

Javascript wise, mutli and single native selects work differently. Ideally, we want to decode the selectedOptions property on the target event which returns a HtmlCollection of what is currently selected. The trickyness here mapping the collection to a Select event that makes sense. For example -

Native multi selects allow for selection in various ways i.e.

• Select options one at a time.
• Select multiple items by holding down a modifier (cmd mac).
• Bach select by holding down (shift) and clicking.

We have to neatly deal with these options for selecting. We might consider adding a BatchMultiSelect event to deal with native elements and could also be reused for batch selection in the custom element. This event would essentially just give the consumer a list of all the things that are selected.

To help with the selection we could store a data attribute with relevant information. On the event we would retrieve that data with dataset.

Resources

https://ellie-app.com/pBZx7BQs3Sa1

Context

Currently elm-select doesn't allow for users to render their own custom views for list items. This would be handy for users who want to add svg adornments or show a list item with more rich data.

Proposed solution

• Allow for users to pass Html Never views

Resources

Selectize does a good job of doing this for its views.

Context

The select styling is currently not configurable so consumers are stuck with the default style decisions that were made.

Work to de done

• Create a configurable styles configuration that works as a source of truth for styling the select.
• Decide which parts of the select can be configurable.

This could be set up as a separate module

module Select.Styles

type Config 
    = Config Configuration

type alias Configuration
    {
      -- named styled properties
    }

Context

When the loading modifier is True the custom select visually changes to indicate new menu items are being fetched based on the user input.

Visually we see :-

• The loading indicator
• A loading message

The loading message only appears if there are no menu items that match the user input. This message is not currently configurable.

Work to be done

• Make loading message configurable via a modifier.
• Write playwright test to assert the loading message is rendering when expected.

Context

Internally the Select pads the given SelectId with its own prefix, but its not discoverable from a consumer. In other words, if you wanted to programmatically focus the select, you would need to hard code an id string into the focus code.
Instead the select should have a helper method that returns the resolved id the select internally builds.

Context

When using any custom variant that is searchable False and setting loading True does not seem to render the loading icon.
This makes it impossible to indicate that a variant is loading items irrespective of any interaction with the input.

Steps to reproduce

• Use any custom variant
• Set searchable config to False
• Set loading config to True
• Loading icon does not render.

I have a form with to select fields. They use the same menu item list but I require the fields to select different items.
The case is to select to teams for a match.

I have one select state for each field. The Select.selectIdentifier could implies that you could have several fields for each state, but when I tried this both fields where triggered when interacting with one of them.

Do I need different states for all fields or is there a way to share state?

the elm-select code inherits a lot of complexity from the original Kaizen design system code. There is a lot of tracking about what node gets a mousedown event fired first. The update function then reacts to this and calculates what to do.

e.g
A SelectInput gets a mousedown, it dispatches the InputMouseDowned Msg. Because the SelectInput lives inside the container which also is listening for mousedown event it also gets fired with a ContainerMouseDowned Msg. If it finds that the InitialMousedown was the InputMouseDown it adjusts state accordingly.

Proposed Solution

Instead of all this InitialMouseDown trickery we can simply stop propagation when it makes sense to do so. For the example above we could stop propagation and handle all the necessary state changes from the InputMouseDowned Msg update instead of ContainerMouseDowned needing to check what was mousedowned first.

InputMouseDowned is a great candidate to try this change on first.

Context

The select variants will not behave like form elements in their current implementations. Some additional work is required to allow select variants to work in a form context.

The custom select variants are not "real" form elements such as <select>options...</select> and so forms will not respect selections.

Work to be done

• Add hidden native elements that hold selected values so forms automatically submit with those selected values.
• Add name modifier to apply to native form elements. Forms will not submit correctly without these.
• remove name attribute when no selection. This will avoid sending default "unselected" options.

Resources

• name attribute in forms
• form playground
• unselected options in form

Context

When the loading modifier is True the select renders a loading svg that is animated. On firefox the loading indicator stops animating when the mouse cursor is not active which is super weird. This issue doesn't seem to affect other main stream browsers.

Work to be done

• Find out why the animation is weird in firefox. I suspect it's missing an animation property.
• Fix said weirdness

Hey there, thanks for the great package!

It seems that one of this packages deps, matken11235/html-styled-extra, no longer exists (this user's github has been deleted I think). This package now fails to build. It looks like someone has already forked it ken-matsui/html-styled-extra. Can you update this dep and republish?

Context

When there are enough multi select tags present that it causes wrapping, there is no visible separation between lines. The tags end up looking connected to the tags above and below them.

Proposed solution

Add a sensible line height so that tags always have some gap between lines.

Context

Allow the menu list styles to be configurable.

Work to be done

Follow the same pattern used for the control styles in the Select.Styles module to create a source of truth for the menu list styles.

Limitations

Menu styles will only affect custom selects as native menu lists can not be styled.

Context

The Native variant seems to ignore the set font family on the html document and so the styling looks different to the other examples.

Proposed solution

Set a font-family: inherit;on the Native variant css.

Context

All the cool kids are doing it, might provide a better way to play with the examples.

Ideas

• Interactive examples
• Code snippets

Hi!

I'm trying out the package for in project and I have a issue with clearable selects.
I have the select inside a form with a onSubmit listener and when I have a select with clearable True and try to clear the field it also submits the form. I use Select.single and not Select.singleNative (for now).

I looked at the code for clearing and it seems that the event handler uses stopPropagation = True and preventDefault = True so based on that I would expect the form to not be submitted.

Do you have any thoughts? Am I doing it wrong?

When a user keyboard focuses into the select the voice over and screen reader does not announce that the element is a combobox. The reason this happens is because keyboard focusing does not open the menu and thus does not render a <ul> element with the role=listbox.

Conversely, click focusing onto the select opens the menu and correctly renders a <ul> with role=listbox. The screen reader correctly announces that the user is in a text field inside of a combobox.

Proposed solution

By default even with the menu closed, if the select is focused we should be rendering a <ul> with role=listbox for the screen reader to correctly announce the element as a combobox.

Context

Using elm/select in other projects I have uncovered that updating elm-css to 17.0.2 is causing weird dom exceptions specifically on svg elements.

Currently all css added to svg nodes are just blowing up with the following error.

Confirmed on this ellie also:
https://ellie-app.com/gmzRCgJP5Lya1

Solution

Try adding css to parent nodes or experiment some kind of workaround.

Context

When selecting a menu item with the keyboard inside a form, the form will be submitted. Inputs naturally have this behavior inside forms but its likely that someone does not want this behavior on selection.

Proposed solution

• remove default input behavior on Enter when making a selection
• Allow default behavior on Enter when there is no selection

Context

When using a searchable select variant the menu items are filtered based on what text is present in the input. We may want menu items however that no matter what input we have, they are always present in the menu.

Proposed solution

• Create a persist flag for menu item configs that allows a menu item to not be affected by filtering.

Context

Action types are there to tell the consumer information about what has happend, like Select or InputChanged. If consumers are tracking the input change and persisting it in their model, it is important for them to know when the input has been cleared. The input is cleared at various stages like Esc when the menu is open, clicking the control etc. The current actions do not reveal when this happens.

Proposed solutions

• expose an InputCleared action
  or
• set the InputChanged value to an empty string. (This would avoid a breaking change.)

Context

The multi tag dismiss icon styles are not currently configurable

Proposed solution

Add dismiss icon styles to Styles module

Context

The loading indicators and loading message currently are not respected in the native select variants.
it's unclear whether the native select variant can load more select options whilst the menu is open.

Work to be done

• Investigate if loading more options dynamically updates the native select menu whilst interacting with it.
• Add loading indicator to native select.

Context

The searchable property is set on the config to True but there are no modifiers exposed to be able to change it.

Turning off the searchable feature will turn the Select in to a normal drop down selector.

Work to be done

Add a modifier to toggle the searchable field in the config.

searchable : Bool -> Config item -> Config item
searchable pred (Config config) =
     Config { config | searchable = pred }

Right now, the documentation says that the input element dynamically adjusts its width for "stylistic reasons". However, I can't tell what the motivation actually is from the current documentation. Is there something that would be stylistically different if the width of the input were always the maximum width that fits in the border?

Context

The README section "Render your select view" Is mapping the Select.view Msg's to the local Msg's in the renderSelect function. The next section is then doing it again.

Work to be done

• Remove the mapping from renderSelect

Context

Communicating breaking changes is best done via a changelog file plus the compiler instead of the compiler alone.
Given there is likely a small user base at the time of writing it would be a good time to start one before the package starts getting billions of downloads a week..

Lets face it i'm the only one reading this...
I'm so alone..

Resource

https://keepachangelog.com/en/1.0.0/

Context

There is currently no option for using elm-select in a dropdown type of menu. This is still a selection of menu items and should IMO fall in the wheelhouse of elm-select.

This would make elm-select more multi purpose and also complement other elm-select variants that may be used in a project both stylistically and functionally.

Proposed solution

• Create menu select variants that can be used as a dropdown.
• Menu variants should still respect Config options like searchable, clearable etc.

Currently when the menu is open and there is text in the input, if a user clicks on the select container the menu closes and the input is cleared.

Conversely, when the same situation is true but the user instead presses the escape button to close the menu, the input does not clear.

There is nothing terribly wrong with this flow other than it is inconsistent functionality. We should pick one flow.

The react-select project clears the input in both scenarios.

Context

Currently the multi select tags a "pill" shaped. For some variety it would be nice to have rectangle ones.

Proposed solution

• Create a options to have rectangle multi select tags.
• Make border radius configurable

• Background color of the select control is something people are likely going to want to configure.
• Keep a sensible default of #ffffff
• Apply to all select variants

Context

setting menu items currently does not use an opaque type of configuration. Instead consumers set items by using a named record.

{ item = "SomeItem", label = "SomeItem" }

Doing more interesting things with these menu items will mean this record will include many more properties all of which will need to be defined by a consumer. For example if we wanted the ability to disable the menu item we might do something like the following:

{ item = "SomeItem", label = "SomeItem", disabled = True }

The more configuration we want to add the more properties we will need to add. Not to mention every package release will be a breaking change.

Work to be done

Turn the menu item configuration into an opaque type so we can add configuration and behaviour without causing breaking changes whenever we want to add to it.

Context

The Menu border radius can be configured so it makes sense to be able to configure the control and menu item radius.

Work to be done

• Add properties in ControlConfig and MenuItemConfig for border radius.
• Create setters for ControlConfig and MenuItemConfig for border radius.
• Create getters for ControlConfig and MenuItemConfig for border radius

Context

Placeholder values set are not respected in the Native variants. This is partly due to how native html selects work.

Work to be done

Add a placeholder option for Native select.

Ideas

• Make the placeholder option disappear/hidden when there is an active selection then re-appear/not hidden when there is no active selection.

Resources

Oldie but a goodie https://stackoverflow.com/questions/8605516/default-select-option-as-blank

Context

RTL languages currently do not have a good experience with elm-select which is unacceptable.

Work to be done

• RTL support should be baked in instead of an option you can switch on.
• Use logical properties where possible to aid in RTL support. (Low hanging fruit)

Edit:
For sake of completions I'll move my full question in from #57 as I posted this issue without any description.

I have a form with to select fields. They use the same menu item list but I require the fields to select different items.
The case is to select to teams for a match.

I have one select state for each field. The Select.selectIdentifier could implies that you could have several fields for each >state, but when I tried this both fields where triggered when interacting with one of them.

Do I need different states for all fields or is there a way to share state?

Context

Setting a custom tag color, or truncation width on the mulit variant tag is configured via the multiTagColor and truncateMultiTag setters respectively. All other styles are done via the Select.Style api. This feels somewhat inconsistent.

Proposed solution

Set the multi tag color and truncation width styles via the Select.Style module.

Possible api

setControlMultiTagColor : Color -> ControlConfig -> ControlConfig

AND

setControlMultiTagTruncation : Float -> ControlConfig -> ControlConfig

The reality is if we want to do something more sophisticated with the multi tags then we will likely re-introduce this opaque type.

Context

At the moment the search functionality is simple as hell. Essentially if the target string contains the string query it is a match and shows in the list.

Work to be done

It would be super cool to fuzzy match results to allow for a more sophisticated search algorithm. A lib like https://github.com/tripokey/elm-fuzzy/blob/5.2.1/src/Fuzzy.elm could be interesting to implement with the package.

A stretch goal might be to highlight the characters in the menu item.

As a first step it might be worthwhile to allow for consumers to provide their own search functionality.

Unknowns

• Performance might be a big deal for large option sets.

Context

Select controls such as the clear button do not consist of text that is discoverable by a screen reader.

Solution

• create visually hidden text so screen reader announces the action intent correctly.
• Set ariaHidden on svg

Resources

• reach visually hidden

Context

Currently we do not set a ariaDescribedBy property on the select input and should be doing so for accessibility compliance.

Work to be done

• Add ability to set an ariaDescribedBy property on all select variants.

The examples on how to set Select styles in the module @docs are stale and incorrect.

Update using correct code examples.

Context

Whilst I consider the package documentation thorough, there is a lack of interactive examples that allows people to navigate documentation and functionality. This is often a barrier to entry when people are looking to see if elm-select is the tool they should use.

Proposed solution

Elm-book will greatly assist in marrying documentation and interactivity into a publishable app.

Resources

• https://react-select.com/home
• https://www.downshift-js.com/

Hello! First off, I just want to say that I really appreciate the time and effort that went into developing this component! I'm a big fan of its usability.

I noticed while trying it out that when you have one elm-select's listbox displaying over another elm-select you can see multiSelectTag close buttons through the overlapping listbox. See screenshot for reference.

It looks like bumping up the listbox's z-index to 2 fixes this issue.

Currently I'm fixing this by overriding the css. If you'd like, I'd be happy to create a PR. Thanks again!

When there are overflowed menu options you can visually focus them by using arrow keys to essentially scroll through the list.
When keyboard focusing a menu option that is not visible the listbox auto scrolls to allow for the menu option to be visible.
The <ul> scene does not account for the padding on the top and bottom and so a small part of the menu option is not visible.

Proposed solution

Because we are currently querying the <ul> scene, we will need to adjust the viewport scroll to account for padding that may be partially obstructing the menu option.

Ideally we can set the top and bottom padding as variables to future proof any changes to them.

Context

When dismissing select tags for a multi variant that is searchable False the menu if closed will flash open on mousedown then close on mouseup.

This causes an ugly flash caused by the menu opening and closing.

Steps to reproduce

• Use multi variant
• Set searchable False config
• Select a menu item
• Mousedown on the multi select tag dismiss icon
• Menu opens
• Mouseup on multi select tag dismiss icon
• Menu closes