Airport auto populate breaks randomly

[marnel-mangrubang]

Describe the bug

When using the "Airport example" on the docsite, the auto fill feature randomly breaks and does not auto select the matching menu option. This is issue happens randomly.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://auro.alaskaair.com/components/auro/combobox
2. Navigate to the Airports example
3. Quickly type 'pdx' into the input field
4. If the input field gets auto filled with a matching menu option, refresh the page and repeat step 3 until only the letters 'pdx' are inside of the input field with a menu option showing. (See attached recording to see the issue. The issue can be noticed at the end of the video. The expected behavior can be seen throughout the video until the very end when it breaks.)

Expected behavior

After inputing 'pdx' inside of the field should ALWAYS auto populate the input box with the matching menu option.

Screenshots/Video recording of Issue

https://user-images.githubusercontent.com/7931018/235256897-6c837640-ae44-4f02-9b8e-6ab5ae7af9df.mov

Desktop (please complete the following information):

• OS: iOS 12.6 Monterey
• Browser: Chrome
• Version: 112.0.5615.137

Additional context

Another issue concerning the Airport Example, but not sure if they are related. #119

[blackfalcon]

@marnel-mangrubang I am unable to repro this issue as you describe. Watching the video I surmise that what is happening is that you started to type into the field before all the resources were loaded.

A few things to keep in mind. The docsite is using all examples from a CDN, so as a performance issue, the Auro docsite is an example for how NOT to do things in prod. We do this for ease of maintenance.

But when trying to repro your issue, if I let all resources load, the element performs as expected.

[braven112]

Closing this issue as the solution will be to not display the the content component until it has fully loaded all of its dependencies.