[AutoComplete] TextField lost focus when options show on Firefox

[misty000]

event : Object { type: "focusout", timeStamp: 0, jQuery21405151968410568655: true, originalEvent: Object, isDefaultPrevented: $(), which: 0, view: Window → ac1.html, target: <input#mui-id-0>, relatedTarget: null, eventPhase: 1, … } 
event.target : <input type="text" data-reactid=".0.0.0.2" style="did-flip:true;tap-highlight-color:rgba(0,0,0,0);padding:0;position:relative;width:100%;height:100%;border:none;outline:none;background-color:transparent;color:rgba(0, 0, 0, 0.87);font:inherit;" value="" id="mui-id-0">

event : Object { type: "focusin", timeStamp: 0, jQuery21405151968410568655: true, originalEvent: Object, isDefaultPrevented: $(), which: 0, view: Window → ac1.html, target: <a>, relatedTarget: null, eventPhase: 1, … } 
event.target : <a data-reactid=".0.1.$=1$dropDownMenu.0.0.1:$/=1$0.$0.0" type="button" tabindex="0" style="did-flip:true;border:10px;background:none;box-sizing:border-box;display:block;font:inherit;font-family:Roboto, sans-serif;tap-highlight-color:rgba(0, 0, 0, 0);cursor:pointer;text-decoration:none;outline:none;color:rgba(0, 0, 0, 0.87);font-size:16px;line-height:48px;position:relative;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;white-space:nowrap;">

And on MS Edge and chrome, it's ok.

[misty000]

I change (auto-complete.jsx line:222) TextField 's onBlur from

onBlur={() => {
   if (this.focusOnInput && this.state.open)
    this.refs.searchTextField.focus();
  }}

to

onBlur={() => {
  if (this.focusOnInput && this.state.open) {
    this.refs.searchTextField.focus();
    var _refs = this.refs;
    setTimeout(function() {
      _refs.searchTextField.focus();
    }, 0);
  }
}}

then it works.

[alitaheri]

@oliviertassinari What do think about this fix?

Although I'd go with:

onBlur={() => {
  if (this.focusOnInput && this.state.open) {
    const refs = this.refs;
    setTimeout(() => {
      if (refs.searchTextField) {
        refs.searchTextField.focus();
      }
    }, 0);
  }
}}

It's a lot safer.

[oliviertassinari]

Hum, why is this blur event triggered in the first place?

[yongxu]

@oliviertassinari blur event triggered every time menu pops. The menu will take the focus when it updates, which defocus the text input. This wasn't a perfect solution and I was planning to change it in the future.

I suggest we should remove the onBlur eventually, which the nicer solution might be adding props in menus. I am quite busy this week, but I can work it out in 2 weeks if this hasn't resolved yet.

This probably also related to #2418

[oliviertassinari]

@yongxu Thanks for the extra bit of imformation.
The setTimeout seems to work but, IMHO, it's a hack and not viable.
We should solve this properly.
This is an intent to do so: #2338.

[konoufo]

Hey guys. Did this get resolved at some point ?

[oliviertassinari]

Closed by #4783