Why is my Google CSE search icon in the header for chrome on mobile not working?

Question

This is very strange and a bit frustrating. Here is the issue. When using Google Chrome for mobile, I head to our website, touch the search icon in the header and a highlight animation happens but the search box will not populate. After that failed attempt, a hashtag is now at the end of the URL. It does not matter what page I am on, the URL will add a hashtag at the end. The menu icon in the header will do the same thing. I then have to refresh the page in order to get the search box to work. I even deleted the hashtag, pressed enter, and the search box populated that way as well as refreshing the page. I cannot replicate the issue via Mozilla Firefox or Webroot Secure Anywhere Browsers for mobile. Another interesting thing is that the issue happened on Desktop via Google Chrome Incognito. Now, once you get the search to populate like normal (after a refresh) and search for something it will populate the results. However, when on the results page, if you click on the search icon in the header, it clears the search results, adds a hashtag to the end of the URL, and no longer works again for mobile via chrome and desktop via chrome incognito. It works fine in Firefox for desktop and mobile; it doesn't matter if I am in Incognito or not.

Unfortunately, I could not find anything related to my topic over the internet. I am a beginner and have tried to figure it out but I have no clue where to start or where to look.

I want to mention that I use WordPress and set up Google CSE with the Layout set to Compact using their Default Theme and have added CSS to style the search box and results. I have run several tests and only one result prevailed. Also, one thing I want to note in doing all of my tests is I cleared my cache via browser and Supercacher for my website. The first test was to deactivate all plugins and that did not change anything. The second step was to delete the CSS I added and that did nothing. Then, I changed the theme and that worked. Our theme, BuddyBoss, has a search.php file and a searchform.php file. The theme I switched to only has a searchform.php file (not sure if that matters at all). I deleted the PHP in the searchform.php file and added the following code (using my Child Theme):

(function() {
    var cx = 'CSE ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only resultsUrl="https://www.example.com/"></gcse:searchbox-only>

If any of you need a copy of the CSS I implemented, just let me know.

Is there some type of code I can put in to fix this issue or is it something else? I understand that this may be a little more complex, so I appreciate the time you give me as well as any help I get. Hopefully, it will be an easy thing to fix. If not, any direction anyone can give me would be greatly appreciated!

I hope I was clear, easy to follow, and answered all of your questions. Thank you!

Thanks and regards,

Josh

Deepak · Accepted Answer

Hi,
Yes, the code which you have mentioned is the old code.
Please review the documents below to understand CSE implementation with new code and examples:
https://developers.google.com/custom-search/docs/ui#implement
https://developers.google.com/custom-search/docs/ui#setting-the-search-element-layout
https://developers.google.com/custom-search/docs/tutorial/implementingsearchbox
Thanks