quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
26.03k stars 3.54k forks source link

Select filter no result label #12977

Open qxygene opened 2 years ago

qxygene commented 2 years ago

What happened?

https://user-images.githubusercontent.com/2819611/160661185-6876d43a-5def-43f3-87ef-f9f319b4e08c.mp4

When clicked on no result and blur, input didnt removed.

What did you expect to happen?

input should be removed.

Code

        <q-select
          v-model="model"
          :options="options"
          transition-duration="50"
          transition-show="scale"
          label="Standard"
          clearable
          outlined
          use-input
          input-debounce="0"
          label-color="primary"
          hint="Fill in between 3 and 12 characters"
          @filter="filterFn"
        >
          <template #no-option>
            <q-item>
              <q-item-section class="text-grey">No results</q-item-section>
            </q-item>
          </template>
        </q-select>

Reproduction URL

https://codepen.io/rstoenescu/pen/xxEvBLR

How to reproduce?

i uploaded a video

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

MilosPaunovic commented 2 years ago

Nowhere it says it's clickable, so it kinda isn't a bug. You can utilize no-option slot and clear input yourself on click.

qxygene commented 2 years ago

so the filter keyword should be removed on blur if there is no match.

qxygene commented 2 years ago

https://user-images.githubusercontent.com/2819611/160675811-b8142bc9-754f-4c65-a105-bdb56c269f4d.mp4

when you click no result and blur it is still there so is it a bug i think.

MilosPaunovic commented 2 years ago

You can achieve all that by utilizing the no-option slot.

qxygene commented 2 years ago

https://vuetifyjs.com/en/components/autocompletes/ Can't you fix it like it is in here ?

qxygene commented 2 years ago

No it is same issue there, type to filter 123 then click at no result once then click outside.

On Thu, 31 Mar 2022 at 01:41, Aldrin Marquez @.***> wrote:

@qxygene https://github.com/qxygene working fine in these examples https://quasar.dev/vue-components/select#example--filtering-options

please provide a reproduction.

— Reply to this email directly, view it on GitHub https://github.com/quasarframework/quasar/issues/12977#issuecomment-1083707074, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAVQMG5ZSYWW4UG5KE3W6ADVCTJ75ANCNFSM5R67X2BA . You are receiving this because you were mentioned.Message ID: @.***>

qxygene commented 2 years ago

https://pasteboard.co/8A3QnoVp0yEe.png

On Thu, 31 Mar 2022 at 10:22, Serkan Tosun @.***> wrote:

No it is same issue there, make a filter to see no result then click at no result once then click outside.

On Thu, 31 Mar 2022 at 01:41, Aldrin Marquez @.***> wrote:

@qxygene https://github.com/qxygene working fine in these examples https://quasar.dev/vue-components/select#example--filtering-options

please provide a reproduction.

— Reply to this email directly, view it on GitHub https://github.com/quasarframework/quasar/issues/12977#issuecomment-1083707074, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAVQMG5ZSYWW4UG5KE3W6ADVCTJ75ANCNFSM5R67X2BA . You are receiving this because you were mentioned.Message ID: @.***>

qxygene commented 2 years ago

https://user-images.githubusercontent.com/2819611/161003318-e438c54a-bd24-439e-be2a-aa790b8590c1.mp4

qxygene commented 2 years ago

it acts like i selected an option.

MilosPaunovic commented 2 years ago

https://codepen.io/milospaunovic/pen/ExovBYm?editors=1011

qxygene commented 2 years ago

nice solution