[Listbox] Hide input that documentation claims is hidden

[ddanger]

This PR fixes #569.

Listbox is not hiding the generated input. But documentation and tests indicate the rendered input is hidden.

• This PR hides it by making it type="hidden".
• Unit tests have been updated to ensure the input is hidden.
• No storybook was added because this is a bug fix. The change does hide the input that used to be visible in the With a Form storybook.

---

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.

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 6e150dd:

Sandbox	Source
tender-moser-ivt42	Configuration
reach-listbox-hidden-input-issue	Issue #569

[chaance]

Can we instead test that the input is visibly hidden with expect(container.querySelector("input")).not.toBeVisible()? I'll probably change the implementation of this in the near future to address arrow form navigation on iOS.

[chaance]

Let's remove these assertions, see comment above about future implementation changes.

[ddanger]

Sure. Do you mean restoring the test to how it was? Or just removing all assertions in this test?

[chaance]

Yeah, we can revert these lines to the one line from before. Let's just keep the check for a standard input and use the not.toBeVisible method to make sure it's hidden.

[ddanger]

There are 2 inputs, the first added by the test (<input type="text" name="name" /> not hidden) and the other added by listbox (which is hidden).

So the test you propose fails.

Do you like this option which will work to get that second input?

 expect(container.querySelectorAll("input")[1]).not.toBeVisible();

[ddanger]

I went ahead and pushed that up along with fixing the other line.

[chaance]

Thank you! Just a few small testing changes and I'll get this merged 👍

[ddanger]

@chancestrickland Let me know if you're waiting on something from me. I think I've responded to your request for changes.