💬 WeWeb team needs your feedback: Select/Multiselect element

[luka]

Hey everyone!

As some of you know, we’re in the process of revamping our basic elements, and we’re starting with the Select and Multiselect elements.

We want to know what are your biggest problems or suggestions about these elements!

Luka

[NicolasLatitudes]

Hello Luka

I do have one but I have’nt quite studied the possible workarounds
We don’t have a complex function editor for labels (and less importantly for value)

---

In several cases, the label will be a combination of fields (ex for an event : title and date)
We could use more flexibility (or at least easier edition) in the label definition !

[sam1]

I would like to be able to access the typed text of the input, this is so we can use create new items from it ect, on blur would be useful for this also.

[D-EFFCON]

My main gripe is that they aren’t as mobile friendly as I feel they could be.
I wish there was a toggle you could switch on between using weweb’s dropdown design or the user’s browser default for rendering those elements (at least on mobile/tablet views).

It’s been a minute since I worked with them, but if I vaguely recall I had a bit of an issue with displaying the overlay menu of choices on mobile when a select element has been clicked. I had to play with all sorts of height/width dimensions, padding to get it to show properly on mobile.

[Himanshu]

Ability to customise the label or displayed text in single select, the way we can do with multi-select.

And an extension of it, customise the label to place more than one text or an icon/image

[raelyn]

Please add this: Once someone selects something in the dropdown element, we are able to change / control what’s being displayed.

Examples:

I have a select element. How to change what's in the label?

I Have the name of the playbook under “Label” - e.g. The Webinar Launch Playbook What I want users to see is “The Webinar Launch Playbook (14 Days)” [image] [image] But it’s not allowing me to bind name and location together as the label. How do I accomplish this, I want users to see both the name and duration of the playbook?

Dropdown Input: How to display a different value upon being selected?

@raelyn If you are really looking to replicate that, I’d go for building a custom element instead of using the WeWeb pre-built phone number picker. You’ll have a wrapper div with the grey border that holds a dropdown element, a div on the left with an image and text (for the country flag and code), then a transparent input on the right. You can set the width of the dropdown to a percent of the parent group’s width (it looks like your inspiration example is about 75%). You can load the option da…

Right now it’s a huge roundabout to accomplish these by building your own element…

[AlexQ]

The most important thing, which others have mentioned here, would be the bindability of the Label and Value fields, to be able to create labels that have more display info that what any one field of an array (ie. to be able to create a label that is “Name + Title” of a user, and any other text or things added to the formula as well.)

Another feature that would be cool would be able to have a tiered interactivity. For example, we are creating events, and say to be able to select Event Type, there could be a top level display of options (ie. Social, Outdoor, Formation, etc) and then if you select something like “Outdoor” it then displays (ie. Sports, Camping, etc.) This may be similar to what @raelyn was asking for, though I’m not sure.

Finally, something that would be helpful would be to assign width of the dropdown separately from the with of the input. There are times where I want the input to auto size based on the text of the selection, but they if selection is a short text, making the input also less wide, then when you click the dropdown, it is the same width and the longer test values are cut off. So it could let the dropdown be sized to the widest value, while the input could adjust to the size of the current selected text and display better.

I hope those suggestions are clear, and possible! Thanks for asking the community to get requests.

[Himanshu]

Another request is to allow a toggle to trim the selection label from the end. If the label is too long, it can be trimmed to Himanshu Sh… rather than increasing the element’s width.

[AmAb]

Ability to search the multiselect field dynamically as the user types in the field, a mix between a search field that makes a request to DB, and the actual tags multiselect. So that we can select multiple city tags for example, as the user types, the binded collection gets updated from the DB. This is really needed when the collection would be too big to be loaded all at once, like a world cities table for example.

[michaeln]

For the multi-select element, I would love more control over the appearance of the default options - mostly border radius and internal spacing/padding.

[what.gift]

Icons in the options, e.g. country flag.

[luka]

Great points from everyone, we will keep all of this in mind when developing the new select

Feel free to keep leaving suggestions

[Laurens]

I would like the option to bind more logic to the settings when wrapping the field in a component. Sometimes I need my dropdown to be searchable, sometimes I don’t want users to be able to unselect, sometimes I do want the clear or caret icon etc.

[Himanshu]

Ability to have list virtualization for the options would be great

[carrano_dot_dev]

One of the most important things to me, and this goes for all components, is control over all aspects of the style

[nick]

Close Select Element when in Collection

Question: How do I close a select element located within a collection when an option has been chosen? Setup: I have 2 select elements being presented for each item in a collection, created from an Array. A “State” select and a “Geographic Area” select. The State select drives the options available within the Geographic Area select. When a new State is chosen, I reset the Initial Value of the Geographic Area select element. I accomplished this by creating a “geoAreaInputValue” variable for eac…

[Himanshu]

When we select multiple values, the options come out of the input.

It would be nice to have it show 3 values selected or Reached POD +2 values

[omartineau]

I just had a usecase this morning on the subject.
We wanted to make a select with a search field. But the options had to come from a collection filtered from the value of the search field.

2 things were missing for this:
1° access to the value of the component’s search field
2° to have a trigger that fires when the value of this trigger is changed.

[archenia_jsanchez]

I think this might be available now if you switch “mode” to “counter,” no?

[Himanshu]

To some extent it works. But I wanted the ability to display the first item and a count of the rest of items.

The counter feature was certainly helpful nonetheless