Search: Clicking outside overlay closes overlay

[jsnmoon]

Fixes #18937.

Changes proposed in this Pull Request:

Adds an event handler on the window checking for clicks outside the search overlay.

Does this pull request change what data or activity we track or use?

None.

Testing instructions:

• Apply this change to a site with a Jetpack Search subscription and Instant Search enabled.
• Perform a site search e.g. /?s=page`.
• Click outside the overlay.
• Ensure that the overlay closes as expected.

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: March 1, 2022.
• Scheduled code freeze: February 22, 2022.

[kangzj]

It works as described, good job 👍 One potential typo and suggested a change.

[kangzj]

I noticed when you open and close the overlay for several times, it causes the browser to hang. Profiled the process, it seems the click event is taking longer each time.

Possibly this is related - we should get the element dynamically instead of storing a static handle even it saves some calculations - the element could be destroyed and re-rendered which is causing objects not released?

[jsnmoon]

I noticed when you open and close the overlay for several times, it causes the browser to hang. Profiled the process, it seems the click event is taking longer each time.

Possibly this is related - we should get the element dynamically instead of storing a static handle even it saves some calculations - the element could be destroyed and re-rendered which is causing objects not released?

Good catch. I'm not able to replicate, but it might have been caused by the resultsContainer value never getting garbage collected upon rapid summon/dismissal of the search overlay. I went ahead and tweaked the click event handler logic.

[kangzj]

Good job it works perfectly and code looks good to me 👍

[annacmc]

Works great for me 👍

[jsnmoon]

Hi @jeherve, just wanted to make sure #22461 is working as expected. In this PR, we're making a minor enhancement to the Search package, resulting in a version bump. This version bump is then propagated to Jetpack's composer.json, which triggers the Jetpack and packages section of the required review check.

Although requiring Crew reviews for packages affecting the Jetpack plugin makes sense, it also means #22461 won't really be useful because any changes (major or minor or patch [EDIT: Patch versions are ignored for local .x-dev pseudo versions, as noted in another comment below]) will bump Jetpack's composer.json and will necessitate Crew review 🙃

[anomiex]

(major, minor, or patch)

Major or minor, but not patch as a patch bump would not result in a change the "0.8.x-dev" pseudo-version.

Unfortunately the check works on the file level, so we can't specify that certain changes to Jetpack's composer.json are ok while others are not.