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

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 <el-option> in <el-option-group>, 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. Here's the component structure in Vue Devtools when the problem appears. Correct component structure can be observed.

For the Subsequent click

Subsequent click events applied to select-input will lead to correct behaviors.

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()
})

ElemeFE / element