Default Search Broken when Events Calendar Pro on Same Page

[OctoCog]

We were informed by our clients that the default search in the header of the page was not working. The page is this one https://bootstrap4.wpenginepowered.com/professional-learning/?prev=states-districts

If you type ‘science’ into the search bar at the top of the page and hit enter. Nothing happens.

When we removed the Events Calendar shortcode from the page the default search functionality worked. There appears to be a conflict between Wordpress’s default search when The Events Calendar is present on the page.

Any idea what we could do to resolve this?

[prakash_s]

Hello @OctoCog,

I checked the given page URL and it seems that the WordPress search is working fine on my end. I have tested it on the Google Chrome browser version 135.0.7049.42. I would suggest you please clear your browser cache and recheck it again.

Thanks

[OctoCog]

Hi @prakash_s

You might have been testing it when I took the calendar down for a moment while conflict testing. Could you try again? I did check the version of my Chrome browser and I’m using version 135.0.7049.85

[prakash_s]

Hello @OctoCog,

I rechecked your site on my end and it worked fine on my end. Please ensure that you have not installed any browser extension that is stopping any CSS/JS file from loading.

Thanks

[OctoCog]

I tried this on Firefox with no extensions and I was able to get the results to appear if I hit enter twice in a row in the search input field. If I hit enter once, it doesn’t work.

I went back to Chrome incognito mode (no extensions) and I was able to replicate the issue. I have to hit enter twice in a row in search in order for the search to work.

This was the response I got from The Events Calendar support team:

I was able to reproduce the issue on your site. While the URL should change to https://bootstrap4.wpenginepowered.com/?s=science when you search for this keyword, it remains the same.

It seems that Ajax in the header search is not functioning which causes the search not to work. May I know how did you add the search in the header? Is it coming from your theme? If so, have you contacted the theme author about this?

[Ismael]

Hello @OctoCog,

Thank you for the info. We were able to reproduce the issue on our end. To properly check the issue, we may need to login to the site. Please provide the login details in the secure note.

Best regards.

[OctoCog]

@Ismael I added the login into into the secure note.

[Ismael]

Thank you for the info. We tried adding the shortcode [tribe_events_list] on the homepage, and the search field still works correctly. Which event shortcode are you using? Please create a test page so we can check it properly.

[OctoCog]

The shortcode we are using is [tribe_events filter-bar="true"]. You can go to the “Professional Learning” page and see the shortcode implemented in the “Learning Opportunities Calendar” section.

[Ismael]

Thank you for the info. We are still not sure why this issue occurs when the shortcode is present, but we managed to work around it by adding this script in the Custom Code > Page JS field.

document.addEventListener('DOMContentLoaded', function () {
    const searchForm = document.querySelector('#search-icon');
    const searchInput = searchForm.querySelector('input[type="search"]');
    const searchButton = searchForm.querySelector('[data-x-search-submit]');

    searchInput.addEventListener('keydown', function (e) {
      if (e.key === 'Enter') {
        e.preventDefault(); 
        searchButton.click(); 
      }
    });
  });

[OctoCog]

@Ismael That worked! Thank you for your help.

[ruenel]

You are most welcome, @OctoCog.