Jetpack: Instant Search: closing overlay with escape key resets URL search string in some browsers

[bluefuton]

This issue only affects the instant-search-master branch. Spotted by @jsnmoon in https://github.com/Automattic/jetpack/pull/14248#pullrequestreview-339528217.

Steps to reproduce the issue

1. Open your WordPress site at /.
2. Enter a query into the search input. Notice that the URL has been set to /?s=hello
3. Press Enter to spawn the overlay.
4. Close the overlay by pressing Escape.
5. Notice that the URL has been reset to /.
6. Repeat steps 1-3. Close the overlay by pressing the Close button on the top right.
7. Notice that the URL has been preserved (/?s=hello).

What I expected

Search string is preserved in URL when closing the overlay with Escape.

What happened instead

Search string was removed from URL - it was reset to /.

[bluefuton]

I can no longer repro this one on instant-search-master so will close for now.

I have noticed that Esc will open the overlay though, which doesn't feel right! I'll fix that now.

[jsnmoon]

I can still reproduce this on instant-search-master with Chrome 78:
1) Navigate to /.
2) Enter a query into the search input (e.g. this wedding).
3) Press enter on the search input.
4) Press escape while the focus is still on the search input.

What I expected to happen:

• The overlay should appear after step 3.
• The overlay should disappear after step 4.

What happened instead:

• The overlay appears as expected after step 3.
• The overlay disappears as expected after step 4.
• The search query string q is automatically cleared after step 4.

I'm guessing there's a key binding for Escape on search inputs.

[jsnmoon]

It looks like this is the default behavior for search inputs in Chrome.

Instead of trying to suppress the default behavior, I think we should work on moving the focus inside the overlay instead.

[bluefuton]

This also happens in OS X Safari.

Firefox retains the query string.

[keoshi]

I actually don't mind the current behavior. This is what I'm seeing:

• Start at /.
• Enter a search query, overlay appears.
• Pressing ESC:
  
  
  
  • With no field selected makes the overlay go away.
  
  
  • With the search field selected makes the overlay go away and the search query is reset.
  
  

[bluefuton]

Now we've moved the focus into the overlay (https://github.com/Automattic/jetpack/pull/14477), this no longer happens in Chrome 🎉