Select cannot query when it has filterMethod prop.

[Emiya0306]

Description

当Select上有filterMethod时， 输入框输入异常。

Reproduce Steps

如图所示，按一次 删除键，删除的内容会被置回来。

复现代码

constructor(props) {
  super(props);

  this.state = {
    options: this.getDefaultOptions(),
    value: {
      value: 'aaaa',
      label: 'aaaa'
    }
  };
  this.handleInput = this.handleInput.bind(this);
  this.handleFilter = this.handleFilter.bind(this);
}

handleFilter(query) {
  const allOptions = this.getDefaultOptions();
  const options = query && query !== this.state.value.label
    ? allOptions.filter(item => item.label.toLowerCase().includes(query.toLowerCase()))
    : allOptions;
  this.setState({ options });
}

getDefaultOptions() {
  return [{
    value: 'aaaa',
    label: 'aaaa'
  }, {
    value: 'aabb',
    label: 'aabb'
  }, {
    value: 'bbbb',
    label: 'bbbb'
  }, {
    value: 'bbcc',
    label: 'bbcc'
  }, {
    value: 'cccc',
    label: 'cccc'
  }];
}

handleInput(selectedValue) {
  const allOptions = this.getDefaultOptions();
  const value = allOptions.find(item => item.value === selectedValue);
  this.setState({ value });
  console.log(value);
}

render() {
  return (
    <Select
      value={this.state.value.value}
      filterable={true}
      filterMethod={this.handleFilter}
      onChange={this.handleInput}
    >
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

Error Trace (if possible)

Solution

Additional Information

[owenshaupt]

@Emiya0306 Did your solution here solve the problem? My team is having the exact same issue and we were curious if your commits listed here fixed the issue. Thanks

[Emiya0306]

@owenshaupt Hi~ Sorry for long time to response... I try the solution code and it works. I recommend you use "antd" to prevent these bugs. That's will be more easy, just only rewrite the stylesheet. 😂