chore: Fixes virtual dropdown tests for React 18

[pan-kot]

Description

This fixes failing autosuggest tests with React 18, reproducible here: #3829

Rel: AWSUI-61204

How has this been tested?

• I run the related integ tests for autosuggest and select a few dozen times locally and got no failures

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.12%. Comparing base (746aab5) to head (17a7dfe).
⚠️ Report is 9 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3842      +/-   ##
==========================================
- Coverage   97.14%   97.12%   -0.02%     
==========================================
  Files         844      844              
  Lines       24505    24553      +48     
  Branches     8647     8659      +12     
==========================================
+ Hits        23805    23848      +43     
- Misses        693      698       +5     
  Partials        7        7              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[just-boris]

Why is this happening?

[pan-kot]

Here is what I observed. I this test:

test(
  'the bottom of the dropdown lines up with the highlighted option, when going down the list',
  setup({ virtualScrolling }, async page => {
    await page.respondWith(0, true);
    await page.keys(['ArrowDown', 'ArrowDown', 'ArrowDown']);
    const { bottom: optionBottom } = await page.getHighlightedPosition();
    const { bottom: dropdownBottom } = await page.getDropdownPosition();
    // a small give for borders and negative margins
    expect(Math.abs(optionBottom - dropdownBottom)).toBeLessThan(3);
  })
);

we issue 3 keydown events. However, only two keydown events are received (sometimes, it is flaky).

I think there is a chance that the key-down handler is called before the options are ready, in which case the 1st keydown is just ignored. Adding a small delay fixes the problem.

[just-boris]

We have a reusable utility for this case: https://github.com/cloudscape-design/browser-test-tools/blob/2f3ae51ccd4f4a9869d09b4701e02b2c4322c0ff/src/page-objects/base.ts#L162-L164

Let's use that one