feat: show dropdown with selected items when readonly

[web-padawan]

Description

As discussed internally, the dropdown should be also available when readonly, so user can see all the selected items.
In this case, interacting with the items isn't possible: you can't un-select them with keyboard or mouse click.

Type of change

• Feature

[jouni]

If I can wish, I would also hide the clear button in the chips (x) in read-only mode.

[web-padawan]

I would also hide the clear button in the chips (x) in read-only mode.

Thanks, done. Also updated themes to hide it when disabled for consistency.

[vursen]

Just happened to notice a suspicious artifact in the gif. What is this thing?

[jouni]

What is this thing?

It’s a visual indication that there are multiple "collapsed/stacked" chips, not just one.

[web-padawan]

Just happened to notice a suspicious artifact in the gif. What is this thing?

Actually, it's kind of a feature, related to another PR in review - please see #3632.

Here is the original design for this extra border: vaadin/platform#2690 (comment)

[vursen]

It’s a visual indication that there are multiple "collapsed/stacked" chips, not just one.

Actually, it's kind of a feature, related to another PR in review - please see #3632.

Ah, right. :)

[DiegoCardoso]

I am thinking that the toggle button color could be in a different shade. Maybe the same as the color when it's not on ready only state. My feeling is that with the current color, it doesn't clearly indicate it's clickable (and might even fail some a11y contrast test, but I didn't test it yet).

[web-padawan]

the toggle button color could be in a different shade. Maybe the same as the color when it's not on ready only state

Good catch. Updated Lumo and Material themes accordingly.

[DiegoCardoso]

For a multi select with no items selected, the overlay opens with all the options.

multi-select-empty-read-only.mp4

[web-padawan]

For a multi select with no items selected, the overlay opens with all the options.

@DiegoCardoso Thanks, fixed. Also updated toggle button styles to use [has-value] accordingly.

[DiegoCardoso]

nit: maybe we can change the cursor to default here

multi-select-read-only-material.mp4

.

[web-padawan]

maybe we can change the cursor to default here

@DiegoCardoso Thanks, fixed.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[vaadin-bot]

This ticket/PR has been released with Vaadin 23.1.0.alpha4 and is also targeting the upcoming stable 23.1.0 version.

[knoobie]

@web-padawan looks like this feature doesn't work (can be reproduced in the docs and was reported here vaadin/platform#3257)

[web-padawan]

Thanks. It's also reported here: vaadin/flow-components#3684. We will look into it.