HSDS-215: Add onchange prop for DropList combobox input

[justinwolfe]

Problem/Feature

Jira Per @luketlancaster's comment here, for the design requirement of this card, I need to make the DropList work so that if: -if there's no text entered into the search input, we don't render the dropdown at all, just the input -if there's text in the search input and there are matches, we render the matches -if there's text in the search input and there are no matches, we render the custom empty list items

I don't think I can accomplish that first requirement with the current DropList implementation because there's not a way to access the search input value. In order to do that, I would think that what's needed is a prop for DropList that passes down a callback for onChange events for the search input. I could then use that to hide the dropdown (using CSS) where there's no text in the search input.

That's what I've PRed simply here—does that sound correct or is there another way you'd recommend approaching this?

Guidelines

Make sure the pull request:

• [x] Follows the established folder/file structure
• [x] Adds unit tests
• [ ] If it is a refactor or change to an existing component, have you verified it won't break existing Cypress tests or have you updated them?
• [ ] Did you verify some accessibility (a11y) basics?
• [x] Adds/updates stories. Guidelines
• [x] Adds/updates documentation (ie proptypes) Guidelines
• [ ] Has it been tested in Help Scout's supported browsers?
• [ ] Requests review from designer of the feature
• [x] Add label (bug? feature?)

[netlify[bot]]

✔️ Deploy Preview for hsds-react ready!

🔨 Explore the source changes: 8863c4065bb22b7fde358e4bf5fd6a80bf04b87d

🔍 Inspect the deploy log: https://app.netlify.com/sites/hsds-react/deploys/614a26f629c6a40008869aef

😎 Browse the preview: https://deploy-preview-982--hsds-react.netlify.app

[justinwolfe]

(Thinking about it now, maybe another way to do it is to pass a prop to DropList like hideListIfEmptyInput or something and have the component handle whether or not to display the dropdown based on the input)

[plbabin]

@justinwolfe yeah I would rather have a prop name hideCustomListIfEmptyInput instead of doing triggering a huge re-renderer by doing everything outside the DropList. That prop need to be implement only in the combobox variant.

I think renderListContents could received that prop and handle not rendering the list (if hideCustomListIfEmptyInput is true and the inputValue is empty

[justinwolfe]

@plbabin Thank you, that sounds good! I'll work on it 👍

[justinwolfe]

Closing up—will approach differently in new PR