search

AlaskaAirlines / auro-menu

Custom element that provides a list of options for the user to choose from
https://auro.alaskaair.com/components/auro/menu
Apache License 2.0
2 stars 3 forks source link

Menu needs to store the selected item as an object that can be queried when selectedOption event fires #92

Closed jason-capsule42 closed 2 years ago

jason-capsule42 commented 2 years ago

Currently we only pass value. We should pass displayValue as well. Without it parent components have to do a lot of work to figure out what the displayValue should be and this could be fragile.

Related to AlaskaAirlines/auro-select#40

Exit Criteria: selectedOption event no longer passes the value During a select the entire object selected is stored to a property that is public

jason-capsule42 commented 2 years ago

This ticket needs to be moved to auro-menu.

blackfalcon commented 2 years ago

What is the use case that a consumer would need the displayed value? When querying a standard select, you get the value attributed to the option, not its content.

jason-capsule42 commented 2 years ago

What is the use case that a consumer would need the displayed value? When querying a standard select, you get the value attributed to the option, not its content.

value !== displayValue in many cases (e.g. flight search value may equal an airport code where displayValue is the full airport name). auro-suggest and auro-select should not need to crawl through all auro-menu options to figure out what the displayValue is. This is extremely non-performant, especially when the menu has 1000s of entries.

In the case of navigating by keyboard this could mean 1000's of validation checks looking for a match every time the user hits the up or down arrow to navigate the menu options.

It's much better to just include the displayValue in the selectedOption event and be done with it.

jason-capsule42 commented 2 years ago

I spoke with @geoffrich a little about this yesterday just to get his opinion here.

The intention is to not require looping through all menu options to find the matching displayValue every time the value changes.

Passing displayValue is a simple and expedient solution. There is a risk regarding future proofing, in that if we later need more data from the menuOption would would have to update the API.

Another solution that would not require us to loop through all menu options to get the displayValue would be to store the selected option object to a property within auro-menu and have the selectedOption not include any details. The listener would then always just query the selected option property in response to the event. In this case, any data on the menu option would be accessible without the looping.