ElemeFE / ElemeFE/element

[Bug Report] First-time rendering of select-dropdown fails using select option group with multiple and filterable.

Open
#18,978 1 comment 0 reactions 0 assignees View on GitHub
stale
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

### Element UI version
2.13.0

### OS/Browsers version
Windows 10.0 / Chrome 80.0.3987.132

### Vue version
2.6.11

### Reproduction Link
https://jsfiddle.net/mmx38qxw/

### Steps to reproduce
1.Send request for data and will use it in vue later.

2.Get select option group with multiple and filterable ready. Use v-for to render `` in ``, applying data mentioned in 1.

3.Wait util request returns.

4.Click select input.

### What is Expected?
After the data returns and click, select-dropdown shold be rendered with all options revealing corresponding data no matter whether it's the first click.

### What is actually happening?
#### # For the first click
**First-time rendering** of select-dropdown fails and the dropdown box has an extremely small height, displaying nothing.
![image](https://user-images.githubusercontent.com/28855138/76843073-37cf8d00-6876-11ea-98d7-9fcaeed8a377.png)
Here's the component structure in Vue Devtools when the problem appears. Correct component structure can be observed.
![image](https://user-images.githubusercontent.com/28855138/76843941-85002e80-6877-11ea-9965-be2e1a9b15f8.png)

#### # For the Subsequent click
**Subsequent click** events applied to select-input will lead to correct behaviors.
![image](https://user-images.githubusercontent.com/28855138/76843219-6c434900-6876-11ea-8b10-8a52f6c56428.png)

This problem appears every first time that I click the select input after the data is ready. What's more, if I remove filterable or multiple, the components behave just right. So I think there might be some conflicts between multiple and filterable when using asynchronous data.

I try to 'imitate' click when the data returns to avoid the first-time rendering and it turns out to behave correctly. Using:
```
this.$refs.select.focus()
this.$nextTick(function() {
this.$refs.select.blur()
})
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.