Skip to content
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

With multiple options containing the same value, both don't show as selected #221

Open
dPopeAlaskaAir opened this issue Nov 20, 2024 · 3 comments
Labels
auro-select Type: Bug Bug or Bug fixes

Comments

@dPopeAlaskaAir
Copy link

Describe the bug

With a select dropdown that has 2 menu options with the same value, selecting 1 menu item doesn't show them both checked. This is a useful feature for something like a country dropdown, where we want to have the most common countries at the top of the list, with the full list of countries at the bottom.

To Reproduce

Steps to reproduce the behavior:

  1. Create a auro-select with an auro-menu that has multiple options, with the same value
<script lang="ts">
    let country = "US";
    
    function handleCountryChange(event: InputEvent) {
        const target = event.target as HTMLSelectElement;
        country = target.value;
    }
</script>
<auro-select
    id="country"
    placeholder="Country"
    aria-label="Country"
    value={country}
    on:auroMenu-selectedOption={handleCountryChange}
>
    <span slot="label">Country</span>
    <auro-menu>
        <auro-menuoption value="US">United States</auro-menuoption>
        <auro-menuoption value="CA">Canada</auro-menuoption>
        <auro-menuoption value="MX">Mexico</auro-menuoption>
        <auro-menuoption value="CR">Costa Rica</auro-menuoption>
        <auro-menuoption value="BZ">Belize</auro-menuoption>
        <hr>
        <auro-menuoption value="US">United States</auro-menuoption>
        <auro-menuoption value="UY">Uruguay</auro-menuoption>

    </auro-menu>
</auro-select>
  1. Open the dropdown

Expected behavior

All items with the same value show with a checkmark next to them.

Screenshots

Ex:
image

Desktop (please complete the following information):

  • OS: Mac, Sonoma
  • Browser Chrome
  • Version 130.0.6723.117 (Official Build) (arm64)

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context

@Patrick-Daly-AA
Copy link

Will need work in auro-menu to implement this feature

@dPopeAlaskaAir
Copy link
Author

@Patrick-Daly-AA Should I recreate the ticket there?

@Patrick-Daly-AA
Copy link

@dPopeAlaskaAir , nope. we'll make it. We need to make changes in Auro-Select too

@Patrick-Daly-AA Patrick-Daly-AA removed the not-reviewed Issue has not been reviewed by Auro team members label Nov 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auro-select Type: Bug Bug or Bug fixes
Projects
None yet
Development

No branches or pull requests

3 participants