Precusor

• T189173 should be resolved before tackling this one.

Steps to Reproduce

1. https://en.m.wikipedia.org/
2. Click the search box at the top of the page
3. Search for "a"
4. Control-click the first result

Expected Results

• Result opens in new tab just as it does for middle-clicking

Actual Results

• Result opens in current tab and destroys browsing context

Environments Observed

• Production enwiki on Minerva

Browser Version

• Chromium 69.0.3497.81

OS Version

• Ubuntu v18.04

Device Model

• Desktop

Device Language

• English

Developer notes

Problem 1: The link only wraps the text.

Since cards are fixed width and height, the link could be made position absolute to contain the whole card.

I recommend making use of the same HTML/CSS that RelatedArticles uses:

Note: The WatchstarPageList component is widely.
To migitate risk of breaking other consumers, it might make sense to use this opportunity to create a Card component and simplifies the logic in resources/mobile.search/SearchOverlay.js and removes its dependency on WatchstarPageList

It might however make sense to fix this everywhere. Choose your own adventure!

Problem 2: Behaviour

A bigger problem is the SearchOverlay.prototype.onClickResult handles the clicking and uses JS to make sure the search overlay is closed prior to navigating to a link.

This seems to be written to clear the hash and is self-described as an "ugly hack".

How to ensure the hash fragment is cleared before leaving the page?
A better way to do this would be to use replaceState but not preventDefault.
Looks like T189173 needs to be done first

                onClickResult: function ( ev ) {
...

                        // FIXME: ugly hack that removes search from browser history
                        // when navigating to search results
                        ev.preventDefault();
                        this.router.back().then( function () {
                                // Router.navigate does not support changing href.
                                // FIXME: Needs upstream change T189173
                                // eslint-disable-next-line no-restricted-properties
                                window.location.href = $link.attr( 'href' );
                        } );
                },

becomes

onClickResult: function ( ev ) {
        router.navigate( { path: '#', useReplaceState: true } );
},

Note:
There is a related issue to this hack that I've seen and assume is because of the back button click. Sometimes when clicking on a search result on mobile, the search overlay closes and I do not see the page I just clicked on. I assume this is because the back button is async and happening after the navigation to the page in question.

Patch of proposed fix with imagined API: