Pro Theme Causing Errors on Default Search w/ ElasticPress

We installed ElasticPress onto our client’s site and it’s been working fine up until recently. A staging site here you can see the errors more closely: https://creativecolstg.wpengine.com/ These are the problems that are occurring:

  1. When a user types a search query in the default search at the top of the page autosuggest results appear. If a user clicks on those autosuggest results, nothing happens. When you click on the autosuggest result, it should take you to the post.

  2. If a user types in a query (let’s say salem) hits the search magnifying glass icon, it takes them to the default search results page instead of the ElasticPress pop-up.

This is what you see when you hit the magnifying glass icon.

This is what the user should be seeing.

I know the natural thing to do here is to talk to ElasticPress, which is what I set out to do.
We brought this to the attention of ElasticPress, created a staging site, enabled the Twenty Twenty Four theme and disabled all plugins but ElasticPress. It worked with the block editor default search!

Once we turned on Pro theme and used the default search with no plugins enabled except ElasticPress the search had the same problems listed above. ElasticPress looked more closely and found Javascript console errors when the autosuggest results appear in the Cornerstone search.

To replicate these errors follow these steps;

  1. Go to https://creativecolstg.wpengine.com/
  2. Search salem in the top bar search until the autosuggest results appear.
  3. Go to the inspector and look at the console errors. You should see these console errors

Note: If you look below the main navigation, that is the block editor search bar that is working as expected.

Hello,

Thank you for the inquiry.

The default search element or template from Cornerstone has a different structure compared to the Block Search element. It’s possible that the modal popup from Elastic Search was designed specifically for use with either the Block Search or the default WordPress search, so it’s incompatible with other types of search fields.

To resolve the issue, you may need to replace your current search element with the Block Search element. You can copy its html and place it inside a Raw or Text element.

Let us know if you need more info.

Best regards,
Themeco