FIX - Two small bug fixes to search-as-you-type

[gabalafou]

I found two bugs when I was looking at the new search-as-you-type feature:

• Clicking on the backdrop below the search box does not clear the modal
  • Fix: Replace fixed height on search dialog with max height to allow it to expand when there are search results and to collapse when there aren't any
• Copying the search query, deleting, then pasting it back into the search box does not bring back the search results for that query
  • Fix: Clear cached query when current query is cleared

[github-actions]

Coverage report

This PR does not seem to contain any modification to coverable code.

[drammock]

• Clicking on the backdrop below the search box does not clear the modal

  • Fix: Apply height to dialog only when search results are not empty

• Copying the search query, deleting, then pasting it back into the search box does not bring back the search results for that query

  • Fix: Clear cached query when current query is cleared

Testing on https://pydata-sphinx-theme--2111.org.readthedocs.build/en/2111/ (this PR) and https://pydata-sphinx-theme.readthedocs.io/en/latest/index.html (main) I'm a bit confused about what is getting fixed here / what the behavior should be.

1. the bug of "search results don't pop up when pasting into the search box" is clearly present on main and fixed here. 👍🏻
2. the bug of "clicking backdrop doesn't clear modal" I can't replicate on main (or maybe I just don't understand what the bug is?). What I do see:
   i. on both main and this PR, pressing Esc hides the search field and the search results; pressing Ctrl+K again brings back the field (with previous search text pre-filled) but with no results showing.
   ii. on both main and this PR, clicking on the backdrop hides the search field and results; pressing Ctrl+K brings back both the field (pre-filled with prior search text) and the results.

So 2.i and 2.ii are different behavior between Esc and clicking the backdrop; I don't feel strongly but if forced to choose, I'd make them act the same.

Separately, I find it a bit odd that neither Esc nor clicking the backdrop clears the prior search text out of the search field. It's odd to me that if I search "foo" and then click Esc to exit search, and then later Ctrl+K to do a new search, the search box starts out saying "foo" and I have to delete those letters before I can run the new query that I want to run.

[gabalafou]

So the problem is about the part of the backdrop that is BELOW the search bar. Steps to reproduce:

1. Visit https://pydata-sphinx-theme.readthedocs.io/en/latest/index.html
2. Press control/command + k
3. Click on the area BELOW the search bar (and within its left and right bounds)
4. Observe that the search bar does not go away

The reason why #2093 introduced this bug is straightforward. It made the height of the search dialog 80vh to accommodate the search-as-you-type results. But most of that 80vh is just empty until populated with search results. It's just a tall container with a skinny search bar at the very top. But the rest of the container is transparent, allowing the user to see through to the inert/grayed-out page beneath the dialog. And if you click in that space, it looks like you're clicking the page underneath, but you're actually clicking on transparent space of the dialog itself and so it doesn't go away.

---

As for discrepancies in clearing the search results, I can only reproduce 2.i (escape key clears results but not query) in Firefox. I could see 2.i causing usability problems but not 2.ii, so I say we take the path of least resistance to one of the following:

• closing the search dialog (doesn't matter how you close it, whether pressing escape key, clicking the backdrop, pressing control + k, doesn't matter) always clears both the query and the results
• closing the search dialog always keeps both the query and the results

The mixed state is the problematic one for me. We should never clear the results but keep the query, nor should we clear the query but keep the results (unless we change the UI at some point in the future to show some kind of default results when the query is empty - for example, Algolia will show results from your past queries when you open the search modal - but for a search-as-you-type UX, I would argue that having some default in the results area makes the UX less intuitive because it's slightly harder to use inductive reasoning to make the connection between the content in the search box and the content below, since there's an exception, i.e., shouldn't empty box equal empty results?).

[gabalafou]

Don't know why I didn't see this the first time around, but yeah, the simple solution is to apply a max-height on the search dialog, not to toggle a height class 🙈

[drammock]

the problem is about the part of the backdrop that is BELOW the search bar.

Ah, ok, I did indeed misunderstand. Pretty sure I was clicking off to the side

I can only reproduce 2.i

I'll try to make a video of 2.ii later today when I'm at my desk

The mixed state is the problematic one for me

Agreed. I'd vote for always clearing both results and query