Fix new tab behavior on search result links
What does this MR do and why?
Fixes a bug where search result links could not be opened in a new tab.
Closes #261 (closed)
The original implementation had two main issues:
- Forced navigation: It always navigated to the link using window.location.href, which always loads the URL in the current tab, regardless of how the user clicked (Ctrl+click, middle-click, etc.).
- No event parameter: The function didn't accept the click event as a parameter, so it had no way to detect if the user was trying to open the link in a new tab.
This MR fixes these issues by:
- Adding the event parameter: We now pass the click event to the function, allowing us to check if modifier keys were pressed.
- Detecting modifier clicks: We check for Ctrl/Cmd key or middle-click with
const isModifierClick - Conditional default prevention: Only for normal clicks do we call event.preventDefault() and manually navigate. For modifier clicks, we let the browser handle the click naturally, which respects the user's intention to open in a new tab.
- Still capturing analytics: We still track the click for analytics in all cases before navigation occurs.
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing/docs-gitlab-com/-/blob/main/doc/setup.md. -
In https://docs.gitlab.com/review-mr-361, search a query like "emojis" and go to search results page. Try all the following ways to navigate to a link. For each time you click on a link, make sure the "Top clicked results" for that particular link has updated its count (You have to refresh the elastic search page to update the count 😞 ). For example, if I click the first link for "Emojis" theTop clicked resultsshould increment the count for/review-mr-361/development/fe_guide/emojis.
- normal click on a link - this will open the content page on the same page.
- press command + click on a link - this will open the content page on a new tab.
- open context menu and click on "Open Link in New Tab" - this will open the content page on a new tab.
- open context menu and click on "Open Link in New Window" (try the private window option as well) - this will open the content page on a new window.
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.
Edited by Sarah German