JSFiddle - React, Tailwind, and code Playground

by bobylito

HTML

<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css">


<input id="search-input">

<div id="collections-search-stats"></div>
<div id="collections-search-hits" class="clearfix"></div>
<div id="collections-search-pagination" class="center-text"></div>

<div id="stories-search-stats"></div>
<div id="stories-search-hits" class="clearfix"></div>
<div id="stories-search-pagination" class="center-text"></div>

<!-- Collections Template -->
<script type="text/html" id="collections-hit-template">
	<div>Collection: {{title}}</div>
</script>

<!-- New Stories Template -->
<script type="text/html" id="stories-hit-template">
	<div>Story: {{title}}</div>
</script>

JavaScript

// search
// ------------------------------------------------------------------
jQuery(document).ready(function($) {

	// https://community.algolia.com/instantsearch.js/documentation/

	// Desktop Search
	// ----------------------------------------------------

	// if the page has the input element
	if(document.getElementById('search-input')) {
		// start instasearch
		var story = instantsearch({
			appId: 'VMXWINPHYU',
			apiKey: '7ab1b7dc666a27fb8947406b86805068',
			indexName: 'stories',
			urlSync: false,
			searchParameters: {
				hitsPerPage: 12,
			},
			searchFunction: function(helper) {
				var query = helper.state.query;

				// prevent search on empty query
				if(query === '') {
					return;
				}
				
        // Control the other search from here
        if (collections.helper.state.query !== helper.state.query) {
          collections.helper.setQuery(helper.state.query);
   			}
        
				// search on non-empty query
				collections.helper.search();
				helper.search();
			}
		});

		// init collections index
		var collections = instantsearch({
			appId: 'VMXWINPHYU',
			apiKey: '7ab1b7dc666a27fb8947406b86805068',
			indexName: 'collections',
			urlSync: false,
			searchParameters: {
				hitsPerPage: 12,
			},
			searchFunction: function(helper) {
				// don't search initially 
				if(helper.state.query === '') { // Fixed this condition
					return;
				}

				// helper.setQuery(query); // << THE BUG IS HERE
        
				helper.search();
			}
		});

		// searchbox widget used for the <input> element
		story.addWidget(
			instantsearch.widgets.searchBox({
				container: '#search-input',
				placeholder: 'Search for martin',
				poweredBy: false,
				reset: false,
				magnifier: false,
				loadingIndicator: true,
				wrapInput: false,
				autofocus: true,
				searchOnEnterKeyPressOnly: true
			})
		);

		// hits widget used to display collections results
		collections.addWidget(
			instantsearch.widgets.hits({
				container:...