Clear input when SelectPanel closed

[owenniblock]

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

Clearing the input when the SelectPanel dialog closes.

Integration

No

List the issues that this change affects.

Relates to https://github.com/github/primer/issues/3932

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Easiest way to fix this was to clear the input in TypeScript when the hide method is called.

Anything you want to highlight for special attention from reviewers?

Accessibility

• No new axe scan violation - This change does not introduce any new axe scan violations.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 13326fc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[camertron]

Hey @owenniblock, looking good!

I'm concerned that clearing out the filter input by doing this.filterInputTextField.value = '' won't trigger a remote request in remote fetch mode. Could you add a test for that case and ensure it works as expected?

Expected behavior:

1. On close, filter input text is cleared.
2. Panel closes and is hidden from view.
3. Since the filter text is now empty, the panel kicks off a remote fetch from the server and updates the list of items.
4. User re-opens the panel and sees the original list of items.

[owenniblock]

@camertron quick question on the exact functioning you're after here.

I can see that currently it doesn't do the fetch until the dialog is re-opened (it does do the fetch so it could be worse).

Do we want to trigger the fetch in the background when the dialog is hidden? I figure the positive to doing it this way is that the data is loaded ready when the user re-opens the dialog. Alternatively, if we leave it how it is, the positive is that if the user doesn't re-open the dialog (perhaps they opened it in error) we don't do an unnecessary call to re-populate the data.

Happy either way, just wanted to confirm before making a change from what's already there 😅

[camertron]

@owenniblock yeah, that's a great question. I personally think it's a bit jarring to see a list of items when you open the panel only to have those items more or less immediately replaced with another set of items. You'd be a second or so into visually scanning the items and then whoops! All replaced 🥴

Thoughts?

[owenniblock]

@camertron yeah I think that makes sense. It's also a bit annoying that the loading is gone (there's a small loading spinner in the input itself). I'll see what I can do 😄

EDIT: Done 🎉

[camertron]

Cool 😎