confidenceman02 / elm-select Goto Github PK
View Code? Open in Web Editor NEWLicense: BSD 3-Clause "New" or "Revised" License
License: BSD 3-Clause "New" or "Revised" License
The Menu border radius can be configured so it makes sense to be able to configure the control and menu item radius.
The list item styles are currently not configurable.
Add the menu item styles to the Styles module.
Allow the menu list styles to be configurable.
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.
Menu styles will only affect custom selects as native menu lists can not be styled.
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.
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 message only appears if there are no menu items that match the user input. This message is not currently configurable.
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.
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.
RTL languages currently do not have a good experience with elm-select which is unacceptable.
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.
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
Try adding css to parent nodes or experiment some kind of workaround.
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.
Elm-book will greatly assist in marrying documentation and interactivity into a publishable app.
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.
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.
There currently is no multi native variant. This multi native variant would work well for a native multi select experience especially on phones.
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.
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
.
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.
Even the native select variant will not currently work as the name
attribute is not being applied. this seems like the most low hanging fruit however.
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?
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.
searchable False
configCurrently the multi select tags a "pill" shaped. For some variety it would be nice to have rectangle ones.
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.
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.
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.
persist
flag for menu item configs that allows a menu item to not be affected by filtering.The select styling is currently not configurable so consumers are stuck with the default style decisions that were made.
This could be set up as a separate module
module Select.Styles
type Config
= Config Configuration
type alias Configuration
{
-- named styled properties
}
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.
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 }
The examples on how to set Select styles in the module @docs are stale and incorrect.
Update using correct code examples.
The multi tag dismiss icon styles are not currently configurable
Add dismiss icon styles to Styles module
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.
InputCleared
actionWhen 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.
searchable
config to False
loading
config to True
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.
Enter
when making a selectionEnter
when there is no selectionSelect controls such as the clear button do not consist of text that is discoverable by a screen reader.
Currently we do not set a ariaDescribedBy property on the select input and should be doing so for accessibility compliance.
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.
Line 1760 in d9520a3
Currently I'm fixing this by overriding the css. If you'd like, I'd be happy to create a PR. Thanks again!
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.
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.
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.
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.
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.
The Native variant seems to ignore the set font family on the html document and so the styling looks different to the other examples.
Set a font-family: inherit;
on the Native variant css.
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.
Html Never
viewsSelectize does a good job of doing this for its views.
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.
All the cool kids are doing it, might provide a better way to play with the examples.
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?
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?
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.
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.
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.
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.
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.
Expose an unStyled function the does this mapping from within the package. This avoids the consumer needed the direct dependancy.
Placeholder values set are not respected in the Native variants. This is partly due to how native html selects work.
Add a placeholder option
for Native select.
Oldie but a goodie https://stackoverflow.com/questions/8605516/default-select-option-as-blank
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.
searchable
, clearable
etc.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..
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?
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.
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.