[Solved] QSelect: Is that possible to show drop list in readonly mode

[Stanley]

Dear Quasar team,

As the example of QSelect,
https://quasar.dev/vue-components/select#Disable-and-readonly
It can’t show the drop list in readonly mode.
Thanks!

[metalsadman]

@stanley What you can do is wrap your qselect in a div, set a click event there and use a ref on your qselect, calling the showpopup method.

[Stanley]

@metalsadman said in Q-Select: Is that possible to show drop list in readonly mode:

showpopup

Thanks!
I tried that but failed. Could you please have a look?
https://codepen.io/Stanley-549393092/pen/ZEBWOXK?editors=1111

[Stanley]

I tried another way of using property ‘disabled’, now the drop list can be displayed by calling method ‘showPopup’.
But at the same time, the value is also changed if I pick any item.
https://codepen.io/Stanley-549393092/pen/abBZzrg?editors=1111
I just would like to show the drop list in read only mode, so user can see the possible values.
Thanks for your help!

[dobbel]

@stanley

Like this?
https://codepen.io/ontwikkelfabriek/pen/zYoBQLY

[Stanley]

@dobbel Looks cool!
One question, can it support change/display mode at the same time?
If I switch to change mode (E.g. by a flag), how I can select one item, thanks!

[dobbel]

@stanley

If I switch to change mode (E.g. by a flag), how I can select one item, thanks!

What do you mean?

[Stanley]

@dobbel I mean if we are in display mode (flag = display), then your solution works good.
But if I switch to change mode(flag = change), user can select something from the drop list.
so can it also switch to normal QSelect?

[dobbel]

@stanley said in QSelect: Is that possible to show drop list in readonly mode:

change / display mode

Eum sorry what do you mean with display mode / change mode? You could show me with a codeopen…

[Stanley]

@dobbel I did a demo in below link.
https://codepen.io/Stanley-549393092/pen/WNoROJa?editors=1011
As you can see I define two q-select, so my question is can one q-select meet two modes (display & change)? Thanks!

[dobbel]

@stanley

Ah you want to switch between readonly on/off for the Qselect options:

https://codepen.io/ontwikkelfabriek/pen/zYoBQLY?editors=1111

[Stanley]

@dobbel It’s fantastic, Thanks a lot!
By the way, shall I submit a PR to add this feature? Because I have to add several line code every time and I think it is a normal requirement.

[dobbel]

@stanley said in QSelect: Is that possible to show drop list in readonly mode:

shall I submit a PR to add this feature? Because I have to add several line code every time and I think it is a normal requirement

You can always do that.

[Stanley]

@dobbel Got it. Thank you!