QSelect - UX improvement on mobile

[nicholaszuccarelli]

I'd like to suggest a small UX improvement on mobile devices when using a QSelect.

Would it be possible to add a X (close button) at the top left, or the option of a slot to append a button (etc) in dialog mode?

For example, in this screenshot, it is not super obvious that you must click on the outside edges to close the dialog (and the user base for our app is 40+ years old, so it is not blatantly obvious to them that they need to tap outside the box to close it)

(Keep in mind that this is on a regular iPhone 6 (4.7") so the edges are pretty small too)

[nicholaszuccarelli]

As a quick mockup of this request:

Essentially (in my case), overriding the prepend slot with a X button which closes the dialog.

[cyhnkckali]

Hello Community, At what stage is the latest situation in development?

[darkopetreski]

Any news on this ?

[Drabuna]

Would be great to have this!

[brunaoalberto]

Has the solution been implemented? If yes, how to use it? I didn't find it in the documentation

[darkopetreski]

I am using the following to achive the functionality:

1. Append close button as a slot

   <template v-if="$q.platform.is.mobile" v-slot:append>
     <q-btn outline rounded size="xs" v-close-popup class="close-select-dialog">Close</q-btn>
   </template>

2. Add some css to show the close button only when the select is shown as dialog. (Other ideas maybe using v-if ?)

   .close-select-dialog {
   display: none;
   }
   .q-select__dialog .close-select-dialog {
   display: block;
   }

   

[BrunoSistemaImagem]

I had implemented it as follows:

      <template v-if="iconClose" v-slot:prepend>
        <div class="mobile-only">
          <q-btn color="primary" icon="mdi-close" flat v-close-popup size="15px" />
        </div>
      </template>

iconClose is changed to true only when clicked to open the qselect options

However, the way you did it seems more correct to me...

I will implement it in the same way. Thanks a lot for the help.