Issue with Algolia search since v4.14

[deepfriedbrain]

• Minimal Mistakes version: 4.14.0
• Ruby gem or remote theme version: 4.14.0
• Jekyll version: 3.8.5
• Git repository URL: NA
• GitHub Pages hosted (if yes provide URL to site): NA
• Operating system: MacOS 10.14.1
• Algolia version: 1.4.1

NOTE: This issue seems to be related to #1903 but I'm not sure.

I was trying to upgrade from v4.6 to 4.16.2. All the issues have been fixed except one.

I have been using Algolia search on my site much before it was introduced in this theme (you can see my implementation on this page https://www.deepfriedbrainproject.com/search). The production site is still running on 4.6.0.

After upgrading to 4.16.2 in my development server, I cannot click on any individual page link or any link in the refinement list. Everything including the search box, the refinement list, the list of posts, and the pagination at the bottom, becomes a single hyperlink pointing to a single blog post URL. It's really weird.

I spent some time to troubleshoot but couldn't figure it out. So, I rolled back all my changes and started from scratch. I upgraded to v4.9.0, the search still worked fine. Then I jumped to 4.12.0, it still worked, then 4.13.0, it also worked, and finally at 4.14.0 it broke. The only other thing that changed was the update of jekyll-feed dependency from 0.9.2 to 0.10.

So I've isolated it to some change in 4.14.0. Is there any special change in 4.14.0 that would break my search implementation? I would like to keep it as it is right now.

I'm not using any of the Algolia configurations specified in this theme's documentation.

[mmistakes]

To my knowledge anything related to Algolia search hasn't changed since it was added x versions ago. I guess look through the changelog and commits to see what changed (if anything) to compare.

Since you're using Algolia in a different way from the theme maybe there's some sort of incompatibility or changes made specifically for the theme are interacting with your implementation negatively. I really can't help debug without seeing the site with the defect. If you can spin up a test repo that reproduces the problem I can take a look, otherwise anything I offer are shots in the dark.

[deepfriedbrain]

I have deployed a test site version here https://staging--deepfriedbrain.netlify.com/search/

Algolia was introduced in 4.10.0 but I can successfully use up to 4.13.0. It breaks only at 4.14.0. In the 4.14.0 I see a fix #1904, which fixes bug #1903 and it sounds similar.

[mmistakes]

OK, this helps. Yes the #1903 is the same thing going on for you. Since you have different HTML markup it doesn't fix your issue specifically.

What's going on is each of the search result <a> anchors have CSS to absolutely position :before pseudo elements to cover the entire parent container. This has the benefit of making a larger tap target for hitting the link instead of having to click directly on the headline.

But because your markup is different your <div class="ais-hits--item"></div> elements don't have position: relative; on them to contain the absolutely positioned a::before elements. Which screws up what you can click on.

TL/DR add this to your stylesheet:

.ais-hits--item {
  position: relative;
}

[deepfriedbrain]

Awesome. Thanks so much for your help. Great explanation and perfect fix.