Numeric Selector Default Value

I’m using the Numeric Selector widget to filter on items in a given timeframe:

options: [
  {label: 'All Listings', value: 0},
  {label: 'Listings from the last 24 hours', value: last24h},
  {label: 'Listings from the last 3 days', value: last3d},
  {label: 'Listings from the last 7 days', value: last7d},
  {label: 'Listings from the last 30 days', value: last30d}
],

I’ve also created a custom widget using the connectNumericSelector to build a simple numeric selector field which filters on an inputted number value.

In both cases, I cannot set a ‘blank’ default value. In my above example, if I change the above line to either of the following, I get an error:

options: [
  {label: 'All Listings'},
  // OR:
  {label: 'All Listings', value: undefined},
  // OR:
  {label: 'All Listings', value: 'undefined'},
],

This ticket here suggests that this should work, as does the documentation.

Also, while I’m somewhat on the topic I thought I would ask. What I need is a simple widget: a number input field and a submit button. When a the button is clicked, it filters the value in the input on the given attribute.

image

I used the connectNumericSelector to build it, and it works (minus the issue of the default filter), but it feels clunky. The connector requires the options array to be provided, even though I don’t require any since I am only using an <input /> field. Is there a better way?

Hi @kevin2,

Which version of InstantSearch.js are you using? I’ve tried to reproduce the error but I didn’t manage to get it. Here is the example I’ve built. Note that this feature is only available from the version 2.2.4. In case the issue persist, could you setup a live example of the problem? It will help to better understand where it come from. We provide a template to avoid you the boilerplate part.

For the second question, we don’t have a dedicated connector for those use cases. But it’s a simple one so you should be able to create your own widget to refine with the value provided through the input. Here an example of such a widget.

Hope that helps!

1 Like
console.log(instantsearch.version); // 2.10.2

I tried changing it to 2.10.1 like in CodeSandbox, but I’m getting the same issue. I can’t seem to re-create the issue in CodeSandbox, either.

This is the error I get in the console. Here is the full stack-trace:

Error: The value should be a number, a parseable string or an array of those. instantsearch.js:2:207501
	r                           https://www.<mywebsite>.com/instantsearch.js:2:207501
	addNumericRefinement        https://www.<mywebsite>.com/instantsearch.js:2:55294
	getWidgetSearchParameters   https://www.<mywebsite>.com/instantsearch.js:2:143341
	value/<                     https://www.<mywebsite>.com/instantsearch.js:2:266404
	reduce                      self-hosted:365:27
	value                       https://www.<mywebsite>.com/instantsearch.js:2:266313
	value                       https://www.<mywebsite>.com/instantsearch.js:2:265065
	u/<                         https://www.<mywebsite>.com/instantsearch.js:2:109354
	reduce                      self-hosted:365:27
	value                       https://www.<mywebsite>.com/instantsearch.js:2:115214
	<anonymous>                 https://www.<mywebsite>.com/MySearchScript.js:1096:1 // this line is search.start()

This is how I’m including instantsearch:

// Current method:
// this is just a downloaded version of the next method
<script src="path/to/my/directory/instantsearch.js"></script>

// also doesn't work:
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.2"></script>

// also doesn't work:
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.1"></script>

What else could be causing this issue?

And thank you for the example widget, it’s very helpful.

Hi @kevin2, thanks for the stack-trace it helps a lot!

The issue seems to come from the routing option of InstantSearch. Could you confirm that you are actually using this option? I manage to reproduce the issue when this option is enabled (see this example).

I’ve open an issue on GitHub about that.

1 Like

Cool! Glad to be able to contribute to fixing bugs.

I am indeed using routing, so turning it off is not an option.

I find that I have trouble gleaning any useful information from the stack-traces when I encounter an error, since the code is minified. Any tips on how I could benefit from them like you did?

In that case it’s just because I know a bit the InstantSearch lib. The stack-trace show the function getWidgetSearchParameters, this function is only used when the routing option is enabled.

1 Like

Hi again @kevin2, the issue has already been fixed in the latest version. You should be able to fix your issue with the version 2.10.3 of InstantSearch. Here is the updated example, the issue is not there anymore.

That solves it! Thanks!

Is 2.10.3 a stable version? Am I good to download and host the contents of https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.3 or will there still be updates to it?

Yes it’s a stable version.

You are good to host the content indeed, but keep in mind that it will always have new versions. We always ship patches & new features.