No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Framework
    3
    14
    485
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Stanley last edited by 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 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @Stanley last edited by 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.

        S 1 Reply Last reply Reply Quote 0
        • S
          Stanley @metalsadman last edited by

          @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

          1 Reply Last reply Reply Quote 0
          • S
            Stanley last edited by

            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 1 Reply Last reply Reply Quote 0
            • dobbel
              dobbel @Stanley last edited by

              @stanley

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

              S 1 Reply Last reply Reply Quote 1
              • S
                Stanley @dobbel last edited by

                @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 1 Reply Last reply Reply Quote 0
                • dobbel
                  dobbel @Stanley last edited by

                  @stanley

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

                  What do you mean?

                  S 1 Reply Last reply Reply Quote 0
                  • S
                    Stanley @dobbel last edited by

                    @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 1 Reply Last reply Reply Quote 0
                    • dobbel
                      dobbel @Stanley last edited by 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…

                      S 1 Reply Last reply Reply Quote 0
                      • S
                        Stanley @dobbel last edited by

                        @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!

                        1 Reply Last reply Reply Quote 0
                        • dobbel
                          dobbel last edited by

                          @stanley

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

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

                          S 1 Reply Last reply Reply Quote 0
                          • S
                            Stanley @dobbel last edited by

                            @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 1 Reply Last reply Reply Quote 0
                            • dobbel
                              dobbel @Stanley last edited by

                              @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.

                              S 1 Reply Last reply Reply Quote 0
                              • S
                                Stanley @dobbel last edited by

                                @dobbel Got it. Thank you!

                                1 Reply Last reply Reply Quote 0
                                • First post
                                  Last post