Switch to Materialize plugin for sortBySelector

[chadokruse]

Currently we do not use Materialize styling for the sortBySelector widget as the Materialize widget needs to be initialized AFTER the element is rendered by Instantsearch.

As a interim hack, we simply adjust the styling of the select element and do not use the Materialize select plugin.

The TODO is to figure out how best to initialize the Materialize plugin in the normal Instantsearch flow.

Other widgets have the templates API which can take a function, but the sortBySelector does not.

Adding a full custom widget seems unnecessary, though as of last November it was the recommended method.

Instantsearch does provide the render method, but haven't yet figured out how to implement.

Have attempted initializing via a partial custom widget, but that simply renders another widget which has no interactivity with Instantsearch.

search.addWidget({
    render: function(options) {
      $('select').material_select();
    }
  });

Have also tried forcing init into the normal Instantsearch addWidget workflow:

search.addWidget(
    {
      init: function(options) {
        $('select').material_select();
      }
    },
    instantsearch.widgets.sortBySelector({
      container: '#ais-widget-sort-by',
      cssClasses: {
        root: 'input-field'
      },
      indices: [
        {name: 'demo', label: 'Most relevant'},
        {name: 'demo_amount_desc', label: 'Grant size'},
      ]
    })
  );

[chadokruse]

Recommended approach is indeed a custom widget via connectSortBySelector.

De-prioritizing this todo as the existing implementation 'works', though a bit hacky