I found a fix for the issue. On a separate forum, someone said it sounds like the script which is supposed to fire when you click the icon is falling over. That indeed is what it was. A plugin called SG Optimizer added code into my .htaccess file deferring render-blocking JS so I deactivated that feature and the issue was gone.
I also figured out what to add in my child theme’s searchform.php file. I altered my theme’s code slightly as you can compare:
My theme’s searchform.php file:
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( "https://wordpress.stackexchange.com/" ) ); ?>">
<label>
<span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
<input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
</label>
<input type="submit" class="search-submit" value="<?php echo esc_attr_e( 'Search', 'buddyboss-theme' ); ?>" />
</form>
My code:
<form role="search" class="search-form" action="<?php echo ( '/_search' ); ?>">
<label>
<span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
<input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="q" />
</label>
</form>
As you can see I got rid of the method=”get”, removed the input type=”submit” line above the /form, replaced the name=”s” with name=”q”, and on the first line I change the echo URL. I get to keep the styling of my theme’s search box while having it execute the results to Google CSE.
I am not sure if my fix is appropriate to do but it works!