[listbox] add dynamic content example to reproduce bug with keyboard selection order.

[myrjola]

These changes add an example to reproduce a bug that is fixed by #827

I noticed a bug in the Listbox component when adding ListboxOptions dynamically to it. The keyboard selection order is scrambled. Luckily, there's an open PR to fix the bug.

To reproduce:

1. Navigate to new example in Storybook http://localhost:9001/?path=/story/listbox--dynamic-content-ts
2. Click two times on the "Add one more guest" button. This adds two more options to the listbox.
3. Click the listbox open, the "1 room" options should be selected
4. Press the "down arrow" key, I expected "2 rooms" to be selected, but instead "3 rooms" is selected.

Thank you for contributing to Reach UI! Please fill in this template before submitting your PR to help us process your request more quickly.

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code (Compile and run).
• Add or edit tests to reflect the change (Run with yarn test).
• Add or edit Storybook examples to reflect the change (Run with yarn start).
• Ensure formatting is consistent with the project's Prettier configuration.
• Add documentation to support any new features.

This pull request:

• Creates a new package
• Fixes a bug in an existing package
• Adds additional features/functionality to an existing package
• Updates documentation or example code
• Other

If creating a new package:

• Make sure the new package directory contains each of the following, and that their structure/formatting mirrors other related examples in the project:
  • examples directory
  • src directory with an index.tsx entry file
  • At least one example file per feature introduced by the new package
  • Base styles in a style.css file (if needed by the new package)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit be0bacb:

Sandbox	Source
reach-ui-template	Configuration

[chaance]

@myrjola Mind rebasing this on top of the current dev branch? Really I just need this example moved into the new playground package, as package examples are just symlinked now. Thanks!

[myrjola]

@chaance I rebased the changes and verified that the bug still exists. Hopefully the fix proposed in #827 will be merged soon.

Here's the reproduction instructions:

1. Navigate to http://localhost:9001/?path=/story/listbox--dynamic
2. Click "Add one more guest" button twice
3. Pressing down arrow from the first item selects the third item when we expected the second item to be selected.