ReactiveSearch - Can't Force a Selection (e.g. strictSelection) from the autoComplete?

Question

I've followed the tutorials on ReactiveSearch, and I'm using it with React and a hosted Elastic instance on Appbase.io.

I want the user to see auto suggestions, but then only be able to select from the list of suggestions (so if "foo" isn't in the list of suggestions, the query shouldn't be executed).

This is because I don't want to have a search results page, just for the app to immediately take you to the right page based on the selected value.

I thought I could do this with strictSelection and onValueSelected, but it still is allowing a value like "foo" (which is not an autocomplete value) to go through.

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { ReactiveBase, DataSearch } from "@appbaseio/reactivesearch";

class Main extends Component {
  render() {
    return (
      <div className="flex-col lighter">
        <ReactiveBase
          app="bravos"
          credentials="b8AuX6o06:19f6637f-0a80-48f7-8fe7-9fa0339b7c71"
        >
          <DataSearch
            className=""
            autosuggest={true}
            strictSelection={true}
            componentId="search"
            placeholder="Search Name/Ticker"
            dataField={["symbol", "name"]}
            onValueSelected={value => {
              document.location.href = `./${value}`;
            }}
          />
        </ReactiveBase>
      </div>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById("root"));

Codesandbox link: https://codesandbox.io/embed/wqjpoq25w

Answer 1

You've almost gotten it. The key here with strictSelection is to also check the cause of value selection in onValueSelected docs:

onValueSelected is called whenever a suggestion is selected or a search is performed by pressing enter key. It also passes the cause of action and the source object if the cause of action was 'SUGGESTION_SELECT'. The possible causes are:

'SUGGESTION_SELECT'

'ENTER_PRESS'

'CLEAR_VALUE'

This API helps in writing different flows for strictSelection. Here's how you may check for a suggestion selection:

<DataSearch
  ...
  onValueSelected={(value, cause, source) => {
    if (cause === 'SUGGESTION_SELECT') {
      document.location.href = `./${value}`;
    }
  }}
/>

Demo