ElemeFE / ElemeFE/element-react

[Bug Report] Multiple Select has option order problem when it has controlled value.

Open
#972 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.8k
Forks
435
PR merge metrics
No merged PRs in 30d

Description

### Description

当多选Select是一个value受控的元素时,选择的tag和onChange的value会有顺序问题。
多选Select在远程搜索的情况下,当value受控时,选择一个option后,输入框内的值被重置为空。

### Reproduce Steps

1. 给select加上value={this.state.value},multiple,onChange={this.handleInput.bind(this)}属性
2. 点击顺序为"北京烤鸭", "龙须面", "蚵仔煎", "双皮奶", "黄金糕"。
3. 顺序发生错乱

### 基础多选

适用性较广的基础多选,用 Tag 展示已选项

:::demo 为`Select`设置`multiple`属性即可启用多选,此时`value`的值为当前选中值所组成的数组
```js
constructor(props) {
super(props);

this.state = {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: []
};
}

handleInput(value) {
console.log(value);
this.setState({ value });
}

render() {
return (

{
this.state.options.map(el => {
return
})
}

)
}
```
:::

### Error Trace (if possible)

### Solution

### Additional Information

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.