AlaskaAirlines / auro-select

Combo custom element containing pre-defined trigger options with menu in the dropdown panel
https://auro.alaskaair.com/components/auro/select
Apache License 2.0
2 stars 0 forks source link

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

Open dPopeAlaskaAir opened 5 days ago

dPopeAlaskaAir commented 5 days ago

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):

Smartphone (please complete the following information):

Additional context

Patrick-Daly-AA commented 5 days ago

Will need work in auro-menu to implement this feature

dPopeAlaskaAir commented 5 days ago

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

Patrick-Daly-AA commented 5 days ago

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