Element: [Bug Report] <el-select> unexpected blur event

Created on 20 Apr 2018 · 20Comments · Source: ElemeFE/element

Element UI version

2.3.5

OS/Browsers version

win7 / chrome 66

Vue version

2.5.16

Reproduction Link

https://jsfiddle.net/mmx38qxw/1840/

Steps to reproduce

select an item
"@blur" should not be triggered

What is Expected?

no blur event when a value is select

What is actually happening?

blur event is triggered when an option is selected

select bug

Source

FranckFreiburger

Most helpful comment

This bug is too long open. Can you fix this faster?

bapa92 on 2 Oct 2018

👍6 😄1

All 20 comments

1/ It seems that selecting an option still trigger the blur event (at least the first time).
2/ When an option is selected, blur option is no more emitted (just select foo and click outside the select)

FranckFreiburger on 23 Apr 2018

untitled1

Leopoldthecoder on 23 Apr 2018

I clearly have a different behavior.
ELEMENT.version: 2.3.6
navigator.appVersion: 5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36
(same behavior with firefox 59)

issue-10810

FranckFreiburger on 23 Apr 2018

untitled1

I'm using the same versions: https://jsfiddle.net/leopoldthecuber/mmx38qxw/1850/ .

Leopoldthecoder on 23 Apr 2018

same issue with windows 10 + Google chrome 65
and Mac OS X 10_13_4 + Google Chrome 66

FranckFreiburger on 23 Apr 2018

It seems that some friends who I asked to test still have the bug (Chrome 66 @ Linux) and (Chrome Version 66.0.3359.139 & Edge 41.16299.371.0).

FranckFreiburger on 7 May 2018

@Leopoldthecoder, could you consider reopening the issue ?

FranckFreiburger on 9 May 2018

ping !

FranckFreiburger on 31 May 2018

ping! I use mba touchboard with no problem. but has the same problem (@FranckFreiburger ) with the mouse

hellowangit on 12 Jun 2018

🙋，using mbp touchboard with no problem, using mouse on windows 10 have same issue

fireswork on 30 Jun 2018

i have updated my element-ui to v2.4.2, still have problem @Leopoldthecoder

fireswork on 30 Jun 2018

This bug is too long open. Can you fix this faster?

bapa92 on 2 Oct 2018

👍6 😄1

If whats to fix locally error try to use instead event blur - @visible-change

bapa92 on 4 Oct 2018

👍2

el-select set multiple remote attribute, when you focus it, the focus event trigger, it's ok ,_but the blur event is also trigger,_ i think it's _a bug_

sunchenguang on 2 Nov 2018

👍2

@sunchenguang I had the same problem as you so I figured out this workaround:

 multiSelectInputElement: HTMLInputElement;
  inputValue: string;

  onFocus(elem: FocusEvent) {
    this.multiSelectInputElement = elem.srcElement as HTMLInputElement;
  }

  onVisibleChange(isExpanded: boolean) {
    if (!isExpanded) {
      this.inputValue = this.multiSelectInputElement.value;
    }
  }

This saves the input value to this.inputValue every time the expanded options disappear (which is on blur)

tudi2d on 26 Nov 2018

👍1

chrome on macos has the bug

willardwang on 16 May 2019

I'm still seeing this on chrome and safari on macOS and the latest versions of everything. (It's still reproducible with the jsfiddle)

Is it possible that this is just a race condition in handleBlur? It _seems_ to me like isSilentBlur just isn't being set quickly enough. When I get handleOptionSelect to trigger before the timeout then it _does_ seem to do what's expected.

Edit - If I change the timeout from 50 -> 200 ms then I get the intended functionality.