Global Search - New Header Search doesn't support Non-JS searches
What/Why
With the new Header Search we no longer support non-js related searches. This causes problems in the follow scenarios:
- Non-JS specs trying to use the header search without running a headless chrome instance (quite a lot of specs do this)
- A user searches faster than the JS loads
- User knows they want to search and doesn't wait for the DOM to finish loading
- User is searching while on a slow network
Video Example
| Current (Broken) | Legacy (Expected) |
|---|---|
| HTML_Search_-_Broken_w__FF | HTML_Search_-_Expected_w_o_FF |
Proposal
Mimic what we are doing the legacy HAML file with hidden field tags: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/layouts/_search.html.haml.
Expanding on this example we can nest it inside of the Vue target element so that once Vue bootstraps it will remove the HTML form and replace it with the JS one. I have a working example of how we can do this on this MR: !79993 (diffs)
BONUS POINTS: If the JS mounts while the user is in the middle of typing it wipes away their search. We should add some logic at the mount point and preserve the search. We already sort of do this by "re-focusing" the input when it mounts so we can expand on that.