searchValue is not displayed

[koalo]

Expected Behavior

When I set the property searchValue I would expect that the value appears in the search field and that the items are filtered appropriately.

Actual Behavior

Nothing happens if this property is provided.

Steps to Reproduce the Problem

import React from "react";
import ReactDOM from "react-dom";
import MultiSelect from "@kenshooui/react-multi-select";
import "@kenshooui/react-multi-select/dist/style.css";

import "./styles.css";

function App() {
  const items = [
    { id: 0, label: "item 1" },
    { id: 2, label: "item 2", disabled: true },
    { id: 3, label: "item 3", disabled: false },
    { id: 4, label: "item 4" }
  ];

  return (
    <div className="App">
      <MultiSelect items={items} selectedItems={items} searchValue="1" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Also see https://codesandbox.io/embed/react-multi-select-search-test-rsjks

Related

https://github.com/kenshoo/react-multi-select/issues/104

After reading that issue I was expecting that this should work, but I guess I do not understand how to correctly use searchValue.

[yegor-babiy]

@koalo thanks for your feedback, You should use your own controlled component for it, as example - https://codesandbox.io/s/intelligent-ganguly-65ic2 I hope it helps you

[jeffwhat]

I am using a syntax similar to your example code, but it doesn't work:

<MultiSelect 
                  items={this.state.studies} 
                  selectedItems={this.state.selectedStudyList} 
                  onChange={this.handleStudySelect}
                  searchValue={this.state.studiesSearch}
                  searchValueChanged={this.handleStudySearch} 
                  />  

The correct values get set in the state, so the searchValueChanged function works fine, but there doesn't seem to be a way to get the value back into the multiselect.