Skip to content

Add Clear Button to USelectMenu #1057

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
peterkimzz opened this issue Dec 4, 2023 · 11 comments · May be fixed by #3244
Open

Add Clear Button to USelectMenu #1057

peterkimzz opened this issue Dec 4, 2023 · 11 comments · May be fixed by #3244
Assignees
Labels
enhancement New feature or request reka-ui v3 #1289 wontfix-v2 This will not be fixed in `v2.x`.

Comments

@peterkimzz
Copy link

peterkimzz commented Dec 4, 2023

Description

Hi Nuxt UI Team!

When I use USelectMenu component with multiple property, it's hard to clear all items or even each items.

So how about add clearItem options when multiple property is enabled?

I think simply replace the chevron-down icon with x icon when multiple items are selected.

Additional context

No response

@peterkimzz peterkimzz added the enhancement New feature or request label Dec 4, 2023
@peterkimzz peterkimzz changed the title Add Clear Button to Reset Items on USelectMenu Add Clear Button to USelectMenu Dec 4, 2023
@aloky
Copy link

aloky commented Dec 6, 2023

also maybe #898 (comment)

Copy link
Member

Have you tried using the #trailing slot like the Select? https://ui.nuxt.com/forms/select#trailing

@aloky
Copy link

aloky commented Jan 24, 2024

@benjamincanac Yes, but it would be user frendly(or mobile device), if have the delete/clear item in list selected

@aloky
Copy link

aloky commented Jan 24, 2024

Screenshot 2024-01-24 at 17 24 28

@hamonCordova
Copy link

When this will be released???

@rdjanuar rdjanuar self-assigned this Nov 8, 2024
Copy link

image.png

I use a trigger in filters to reset value and don’t need to open it to reset the value

@aloky
Copy link

aloky commented Dec 13, 2024

@JohnnyMaynne Genius, but need button in selectMenu example:

Image

@aloky
Copy link

aloky commented Dec 13, 2024

adding a slot will solve this problem

@emilsgulbis emilsgulbis linked a pull request Feb 5, 2025 that will close this issue
8 tasks
@benjamincanac benjamincanac added wontfix-v2 This will not be fixed in `v2.x`. v3 #1289 reka-ui labels May 10, 2025
@amav96
Copy link

amav96 commented May 13, 2025

@benjamincanac Click.stop in trailling slot not working, only work using USelectMenu

<USelect
  v-model="filters.status"
  labelKey="name"
  valueKey="code"
  :items="userStatuses"
  :placeholder="$t('Status')"
  class="min-w-50"
  size="md"
  >
    <template #trailing>  
        <UIcon
        v-if="filters.status"
        name="i-heroicons-x-mark-20-solid"
        class="size-5 cursor-pointer text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
        @click.stop="filters.status = ''"
        />  
    </template>
</USelect>

Copy link
Member

@amav96 Is this for v2 or v3? In v2 you have to set :ui="{ icon: { trailing: { pointer: '' } } }" for this to work if I remember correctly: https://ui2.nuxt.com/components/input#trailing

@aloky
Copy link

aloky commented May 13, 2025

@benjamincanac what's the problem with adding a slot for this?

apperItems example

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request reka-ui v3 #1289 wontfix-v2 This will not be fixed in `v2.x`.
Projects
None yet
7 participants