Add onValueSelected prop for search components

[divyanshu013]

Issue Type:

Enhancement

Description:

Add a new prop onValueSelected to search components DataSearch and CategorySearch. This will accept a function which will be invoked with the current value when the selected value of the component changes (user presses enter or selects a suggestion or clicks outside). In case of autosuggest set to false this behaves like onValueChange.

This prop will eliminate the need of having an extra component watching the search component with react prop. This also solves a use case of only using the search component for suggestions and displaying the results in a different page with the help of URLParams.

Update - We can also extend the CategorySearch by passing the selected category along with the value to this function. A very interesting and useful usecase is using this category to set the value of a different component, say MultiList as in the Car Store example app.

[metagrover]

Use onQueryChange instead.

onValueChange gets fired while typing and suggestion selection, but onQueryChange only gets fired when the value is selected.

cc: @Guazi - https://codesandbox.io/s/9yz95rnz14

[metagrover]

Turns out, the above logic only works with ReactiveList watching the source component, which is not how we should be supporting this. It causes an additional query to fire and also needs additional efforts to visibly hide the unnecessary ReactiveList component from the screen if the user wants to only show a search-box like that of Google's homepage.

Hence, I suggest it'd be best if we support onValueSelected on suggestions-enabled components.

[siddharthlatest]

What is a good use-case where someone would want a DataSearch component but not the associated Result component?

[metagrover]

Consider this:
you need a page like google homepage, where once the suggestion value is selected, you move to a different page and render results there (like google does with a search-box and results in one page).

[calebdel]

I'm looking for something very similar - a universal search bar (Data Search component) in our app header, that renders results on a specific results page that also includes filters.