This repo is currently in aurolabs and it needs to be in aurodesignsystem.

Describe the bug

We implemented the combobox with a dynamic menu after which whenever one types the first character the menu seems miss-aligned (See picture). We believe it is something to do with the firstUpdate() function not loading the style properly.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://www.alaskaair.com/search-test/
2. Click on 'From or To'
3. Type only one character
4. See the menu miss align. AFTER clicking on the box again or typing another character IT WILL align again.

Expected behavior

Screenshots

Additional context

Our Code
This change was implemented in order to let us handle the menu options dynamically.

As a developer I want to have my code tested so that I can confidently add new features without breaking existing functionality.

AC: Unit tests are up to at least 80%

Publish New Component

Specific steps required to publish this component.

1. Design & Planning

   • Blueprint is created AlaskaAirlines/aurolabs-suggest#1

2. Development

   • Sync with devs and get feedback and to make sure features in the blueprint match what will be developed in the first milestone.
   • Archive any features that will need to be part of a future version.

3. Documentation

   • Component properly described #5
   • Component use case(s) outlined
   • Do Not section outlines implementation scenarios to avoid
   • Example Section
     • Basic example of simplest use case
     • Work with dev to add other common use cases
     • Add figma instructions
     • Create release notes for new component
     • Add Figma tab and figma examples

4. Publishing

   • Publish component to figma library
   • Create PR for release on doc site

Describe the bug

Remove old code that is no longer necessary. See this work for the list.

AlaskaAirlines/auro-flight@903b2c4

Link all states (error, disabled, etc) between auro-input and auro-suggest.

Exit Criteria: All states defined in auro combox figma are present in auro-combox

Describe the bug

Combobox should not have a color change for the hover state.

To Reproduce

Steps to reproduce the behavior:

1. Go to combobox
2. Hover over combobox
3. See transparent background

Expected behavior

The background should be auro-color-background-lightest for all states.

Screenshots

White background (default state) vs transparent background (hover state)

Additional context

This is not a problem in dropdown; dropdown has the correct hover behavior. Combobox's hover state must be treated differently as it is an "text input" interaction.

Describe the bug

None of the examples in the doc site illustrate the chosen option when selected.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://auro.alaskaair.com/components/auro/combobox
2. Go to any example and get a bib/menu to appear
3. Select option from menu
4. See error

Expected behavior

Selected option should appear in the trigger of the element.

Describe the bug

"Set Value to Undefined" button on API value example is not working.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://auro.alaskaair.com/components/auro/combobox/api.
2. Scroll down to value example.
3. Click on "Set Value to Undefined" button.
4. See that the combobox does not clear.

Expected behavior

When "Set Value to Undefined" button is clicked, the combobox should have no input.

Is your feature request related to a problem? Please describe.

Trigger should support all the formats of the input field, like date, credit card, etc.

Fired our own custom event (e.g. auroInput-ready) so that we have total control over the logic as to when a component was truly ready.

I wonder if, by relying on firstUpdated, we are leaving the door open for a future issue where something isn't completed as part of firstUpdated but needs to be before readiness is asserted.

Is your feature request related to a problem? Please describe.

Currently the suggest matches only validate against the innerText of each menuOption. We need to be able to define additional non-displayed text that would cause a match.

e.g. airport names may be displayed without the code but the suggest should still return the airport when the airport code is entered into the input.

Describe the solution you'd like

A custom attribute on the auro-menuoption (perhaps suggest) will also be used in addition to 'innerText` which determining whether to hide a menuoption or not.

Is your feature request related to a problem? Please describe.

We would like the datepicker input box to re-render once the value change. In our case, we want to set the value for the second datepicker once we click on the first one. It is happening but the datepicker is not re-rendering.

Describe the solution you'd like

we would like the datepicker to re-render once the value of the "value" parameter changes. We believe a listener could be added to this parameter or the firstUpdate function could be modify in order to achieve this.

Additional context

Our Code

Describe the bug

support new auro-dropdown matchWidth attribute

To Reproduce

Steps to reproduce the behavior:

1. Go to 'demo
2. type a value to cause bib to open
3. See that the bib width does not match the input

Expected behavior

Bib width should match

Is your feature request related to a problem? Please describe.

When the combobox is the first element in a form, it would be nice to be able to call a focus() method to focus the input so the user does not have to click on it. This is available on auro-input, and would bring this control up to feature parity.

Is your feature request related to a problem? Please describe.

Either add or document an event for when the user selects an option. Currently there is no way to immediately be notified the user has selected an option (that I have found...)

Describe the solution you'd like

Add an event that can be subscribed to for on selected

Describe alternatives you've considered

Not use this control

Describe the bug

To Reproduce

Steps to reproduce the behavior:

1. Go to the demo page and any example
2. Type some garbage characters into the input
3. See that the bib doesn't show the no matching option string
4. Click away from the combobox
5. Click back into the combobox
6. See that the bib shows the no matching option string

Expected behavior

No match string should display while typing as appropriate

Is your feature request related to a problem? Please describe.

Support auro-input noValidate attribute

Describe the solution you'd like

Adding the noValidate attribute to combobox should apply the attribute to auro-input.

Handle error state communication between dropdown and suggest.

Describe the bug

The chevron on the right should not be there according to the blueprint. https://www.figma.com/file/N7GhlX4My3vXWSVzwBeoFq/Combobox?node-id=1203%3A967

Expected behavior

See blueprint.

Screenshots

Write Component Description and Use Cases

Exit Criteria: Hand off documentation to Engineering so the doc site can be updated.

General Support Request

Research has surfaced information that educates us to the fact that suggest is not the best name.

Support request

Rename element and repo to auro-combobox

Is your feature request related to a problem? Please describe.

Auro-menu now supports an optional checkmark. Per design the, default to no checkmark but keep it optional in auro-combobox.

Describe the solution you'd like

Default to no checkmark, add a checkmark attribute that returns it.

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Describe the bug

There are two main bug with the filtering and value attribute.

With the first bug, the combobox filters by value attribute after clicking on the suggested name.
For example, take the code:
<auro-menuoption value="WA" suggest="wa washington"> Washington </auro-menuoption>
When you type in Washington and click on the filtered option everything works as intended. However, when you click on the combobox one more time, it no longer filters by the text value and instead filters by the value attribute.

With the second bug, when you click on the suggested name twice in a row, the value attribute overrides text value.
For example: in the combo box the text value Washington would be overridden with WA

To Reproduce

Steps to reproduce the behavior:

1. Go to https://auro.alaskaair.com/components/auro/combobox and under the Airports example
2. Type in idaho falls and click on idaho falls regional airport
3. Click on the Combo box again.
4. At this point, the combo box is now filtering by the value attribute. Click on idaho falls regional airport one more time.
5. Now the text value idaho falls regional airport turned into ida

Note: The moment you start typing again, it filters by the text value of the combo box.

Expected behavior

When you click on the combo box after having selected your location, I expect the combo box drop-down to filter by the text value instead of the value attribute.
I also expect to have the text value stay the same after clicking on it twice instead of it being replaced with the value attribute.

Screenshots

Desktop (please complete the following information):

• Browser Chrome latest Version
• Windows

Smartphone (please complete the following information):

• Untested

Additional context

None

Update all styles to match figma

Describe the bug

The demo page of this element no longer supports a focus-visible UI state due to updates to WCSS. But what is also interesting is that the polyfill for focus-visible still appears to be operating on the page? Where is that coming from and why?

To Reproduce

Steps to reproduce the behavior:

To Reproduce

Steps to reproduce the behavior:

1. Run the auro-combobox element locally
2. Go to the demo page
3. Tab through the UI
4. See error

Expected behavior

No polyfill should be operating and the focus-visible UI should appear when tabbing to an element.

Additional context

• AlaskaAirlines/WebCoreStyleSheets#118

Is your feature request related to a problem? Please describe.

When I am typing in the combobox, I am frustrated when my results is far down and I need to arrow key down to it when in ascom I am used to it changing my tab/focus location to the closest match

Describe the solution you'd like

If you search for a city in ascom today there is a grey highlight indicating what will be selected when you hit enter.

Say I am searching for 'San Diego' which is SAN

I start typing 'SA' and this is what I get

So if I was going to San Fransisco, this would be super nice because I could just hot enter and move on, but it is also nice because then I type 'SAN' and get

So it bounced the focus down to San Diego because SAN perfectly match the IATA code SAN

Currently there is only the bolding of typed characters which is very useful like so:

and 'SAN' here

But there is no hover/selection of the most matched one like there is in current ascom. This will be nice so the user does not need to arrow key all the way down.

Describe alternatives you've considered

If this is a very specific problem to city searching then we are down to implement something on our side that checks for the most closely matched option and going to that location, but I am unsure if that is even possible with the current combobox? But if there is a way to pass a prop to an option as the 'selected' or 'hovered' item then we could do something on our side!

Additional context

Ping me for a lower env of the flight search site if you want to give the city search combobox a try!

Describe the bug

To Reproduce

Steps to reproduce the behavior:

1. Go to Combobox API page on docsite
2. Scroll down to value examples
3. Click on any of the three buttons
4. See error - nothing happens, value does not change

Expected behavior

Value examples should work

Support latest released auro-dropdown

Support released version of auro-menu

Exit Criteria: Needs to use the latest version of published auro-menu

Is your feature request related to a problem? Please describe.

The auro-combobox does not have a borderless style, so it looks bad when it is combined with other auro components when using borderless styling.

Describe the solution you'd like

Add a borderless attribute so it's design can match other auro components

Describe alternatives you've considered

Limiting designs that use auro to only ever use bordered components.

Additional context

Describe the bug

Entering a character after selecting all text within the input box clears the text, but does not input the entered character.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://www.alaskaair.com/search-test/
2. Search for an airport in either of the "Cities & dates" comboboxes and make a selection
3. Click on the same combobox to select all text
4. Enter a character
5. See that the character clears the box but is not inputted

Expected behavior

Entering a character after selecting all text within the input box should clear the input while inputting the character.

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 105.0.5195.102

Additional context

• The bug does not appear on auro-combobox versions prior to 1.5.1
• Fix is needed before flight search microsite launch on September 21st

Describe the bug

Current implementation is that combobox will pass the input value to menu to attempt to make a selection on blur. This works fine when the value and displayValue are the same. With an example like airport search where the value is the airport code and displayValue is the airport name this causes combobox to show an error.

To Reproduce

Steps to reproduce the behavior:

1. Go to http://auro.alaskaair.com/components/auro/combobox.
2. Scroll to the airport example.
3. Type a value that doesn't match an airport and click on any selection.
4. See the error state of the dropdown.

Expected behavior

The error state should not occur here.

The problem is occurring because when clicking on a menu option you are also triggering the blur event on the input which is then passing a value that doesn't exist. Even though you also selected one by clicking, the input blur event is superseding the other.

Is your feature request related to a problem? Please describe.

We are trying to fill the combobox with the results of the citySearch API for a dynamic response of the suggested cities. At the moment, it seems that the options are not getting marked as selected when clicked on it. We suspect it has something to do with the way that we are dynamically populating the menus.

Describe the solution you'd like

A way for us to not have to click on the bolded area of the menu in order to get the city selected.

Describe alternatives you've considered

have the cities statically in the menu-options which is not ideally what we want.

Additional context

Link to code

Describe the bug

Menu is missing checkbox for selected option.

To Reproduce

Steps to reproduce the behavior:

1. Go to combobox.
2. Type and select an option.
3. Click out.
4. Click on the trigger.
5. See missing checkbox.

Expected behavior

There should be a checkbox next to the selected option as an indication of a selection.

Describe the bug

Currently when you change the value of the dropdown, the active index isn't updated. This creates a scenario where the active index may become hidden by the suggestion matching logic and hitting the Enter key will select the hidden menu option.

Describe the bug

Gray background on hover - this is not in spec and doesn't match auro-input.

There should be no hover color.

Release Candidate

Use the comments from @erikalanghauser from AlaskaAirlines/aurolabs-suggest#8 as acceptance criteria for this version of the component
Since we are doing a refactor using auro components some of these may not apply anymore.

Please refer to this document for background on how this component will be architected.

Can't start until we have these completed.

• AlaskaAirlines/auro-input#55
• AlaskaAirlines/aurolabs-suggest#14
• Validate that all these bugs are also fixed #8
• clone dropdownmenu
• put input into trigger
• a11y of component and all subcomponents.
• marked js string matching

Full a11y support

Exit Criteria: Create individual issues for full a11y support.

Describe the bug

These are the bugs Erika found when doing a UI review of the auroized fly website page. June and I have a branch with a fix to #34 but these are the remaining ones that are showing in combobox...

• Blue border thickness in active state doesn't match spec/auro-input AlaskaAirlines/auro-dropdown#127
• #34
• Click into field, click X, then the From/To label is no longer aligned properly
• Erroring prior to submission - noverify needs to be passed down to input from combobox #37

The one below is weird because it works perfect for me but not on Erika or June's screen.

• The bolding of the letters in the menu that match the entered string - try light weight for menu items with book for the typed letters

For this let's implement flight search's city API so we can validate with real data.

• How is the sorting within the menu happening? Should function like the homepage widget today, but when you start typing "SE" the first few items in the menu don't have an 'S' and 'Seattle ...' is far down the list

Let's refine this list next week and break up any into separate issues if necessary.

Is your feature request related to a problem? Please describe.

auro-combobox currently has very poor/little integration with the built in helptext and validation workflow that exists in auro-input.

combobox needs to respond appropriately when input changes its helpText or changes the error state / isValid state.

Describe the solution you'd like

auro-input has a change pending to send notification events when helptext and validation changes. These should be listened for and handled appropriately based on the new state.

"active" state doesn't move correctly through all of the nested menu options.

General Support Request

Looking around the Auro docsite we are missing a demo using combobox with auro-menu options to select from.

Support request

There is an example of typing into the combobox and getting a smaller list, but there are no examples for how this would be used in the scenario for displaying all menu options when clicking on the trigger.

Possible Solution

Add a demo to illustrate this use case.

Describe the bug

The carrot appears to be too far to the right?

To Reproduce

Steps to reproduce the behavior:

1. Go to https://auro.alaskaair.com/components/auro/combobox#:~:text=to%202%2D34)-,Example,-(s)
2. See error

Expected behavior

Should be like auro-dropdown https://auro.alaskaair.com/components/auro/dropdown#:~:text=Alaska%27s%20accessibility%20policies.-,Common%20use,-with%20auro%2Dlabel

Is your feature request related to a problem? Please describe.

combobox needs to have (per figma) content displayed saying when there are no matching suggestions based on the value entered into the input.

Describe the solution you'd like

Support a 'nomatch' attribute on a menuoption. When this.availableOptions is updated we will check the length and then hide/show the nomatch menuoption based on that check. The nomatch menuoption can also optionally use the new static attribute in auro-menu to make the option non-interactive.

Is your feature request related to a problem? Please describe.

Examples with JS code need better implementation

Describe the solution you'd like

Create a new examples.js file that that contains can run all examples. This one file will be used in AuroDocSite https://github.com/AlaskaAirlines/AuroDocsSite/issues/92

This new examples.js file should insure the component is ready to run the example before executing the JS.

Describe the bug

Required combobox fields error on a click into the field and click out, prior to any text being entered. This feels like bad practice to error on the user prior to even attempting to enter any text as they might just be directing their attention elsewhere temporarily.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://www.alaskaair.com/search-test/
2. Click into 'To' combobox
3. Click out of 'To' combobox
4. See error

Expected behavior

I don't expect the required combobox to error until the user has entered text into the field OR submitted the form without entering any text into the field.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

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

Describe the bug

There is no example present in the demo for resetting a value in combobox.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://auro.alaskaair.com/components/auro/combobox/api.
2. Scroll to value example.
3. See that it only shows preset value.

Expected behavior

Should also show changing value programmatically to either:

1. Valid value
2. Invalid value
3. Undefined

Is your feature request related to a problem? Please describe.

Auro Input allows one to set the error text. Auro Combobox only allows one to set whether or not to persistently show a generic message.

Describe the solution you'd like

Expose the error message as a property that can be set.

Describe alternatives you've considered

Not use this control