Uh oh!
There was an error while loading. Please reload this page.
Ability to unset emptyStateText in Autocomplete.Menu - #4002
Conversation
🦋 Changeset detectedLatest commit: 989433e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
peterbe
commented
Dec 1, 2023
@mperrotti (CC @siddharthkp ) |
lesliecdubs
commented
Dec 6, 2023
Hey @peterbe, thanks for the contribution ✨ ! If you're ready for review, would you please mark this draft as ready and the reviewers will get it into their queue? Thanks! |
peterbe
commented
Dec 11, 2023
@mperrotti I see that you're assigned to the issue |
mperrotti
commented
Dec 18, 2023
Sorry for the delay @peterbe - taking a look now. |
peterbe
commented
Dec 18, 2023
I don't understand the failing CI checks. Is that anything I should heed? |
mperrotti
commented
Dec 18, 2023
We just merged a fix for those. Let me try re-running... |
mperrotti
commented
Dec 18, 2023
@peterbe - try updating your fork to pull the latest |
…u' of github.com:peterbe/primer-react into 3966-ability-to-unset-emptystatetext-in-autocompletemenu
peterbe
commented
Dec 18, 2023
Did that. Same error. |
peterbe
commented
Dec 18, 2023
I think it's because https://github.com/primer/react/blob/1116586269f6fadf9127661f8aef3255b447e8a1/.github/workflows/deploy_preview.yml doesn't specify a |
Closes#3966
Changelog
When you set
emptyStateText={false}oremptyStateText={null}it disables the default display which normally shows when there isallItemsToRender.length === 0.New
Changed
(Not sure what to fill in here)
Removed
Rollout strategy
Testing & Reviewing
I'm actually not familiar with how to test things with Storybook.
I've been using https://github.com/peterbe/primer-autocomplete to play.
I run
npm run mock-serverin one terminal, and in the other I run:Now I can manually test my active changes in
/Users/peterbe/dev/GITHUB/primer/reactResult:
Screen.Recording.2023-12-01.at.4.36.29.PM.mov
(What's not obvious in the video is that a second after I've typed the
yin "holly" the next thing is that hit the Enter key, which (Nextjs) redirects to the full site-search)What this implementation does is that it entirely disables the empty-state text by setting:
So when the cursor is put into the input field, before any XHR can fetch anything, there are no items to suggest. So nothing happens and nothing is shown just because the cursor is put into the input.
Then when you type and, after XHR loading, there's exactly 0 found suggestions, only then does it add a faux item which I watch out for in the onSubmit.
See: https://github.com/peterbe/primer-autocomplete/blob/4af3e861a5fe8443626ec4899d1aa3f29b05b9e7/src/pages/index.tsx#L218
and https://github.com/peterbe/primer-autocomplete/blob/4af3e861a5fe8443626ec4899d1aa3f29b05b9e7/src/pages/index.tsx#L175-L180 for the "faux" suggestion.
And lastly, I complete the full search based on the typed input, these lines:
https://github.com/peterbe/primer-autocomplete/blob/4af3e861a5fe8443626ec4899d1aa3f29b05b9e7/src/pages/index.tsx#L224-L231
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.