React: Call setState onBlur stops event propagation, necessary to use window.setTimeout? or Bug in Flux?

[justin808]

I have an callback for onBlur that will call setState, and based on the state, some buttons may be removed from the screen.

The problem is that one of these buttons has a callback that needs to run, as the onBlur was caused by clicking on that button. If setState is called from the onBlur callback, then the callback for the button (onClick) does not run, maybe because it's not technically visible?. I verified that the button callback works fine if the onBlur callback does not call setState.

I worked around the issue by using a window.setTimout that calls setState after 250ms.

      window.setTimeout( () => {
        this.setState({
          editing: false,
          editValue: this._displayValue(this.props.item[this.valueField])
        });
      }, 400);

Is this the right approach?
Or is this a bug in flux that all callbacks don't run?
My expectation is that the all callbacks would run and the setState calls would be cummulative.

Thanks for any advice.

[cirocosta]

Hey @justin808 , could you please provide an example? In this example you can see that both of the callbacks get fired as expected. I also added a second click button that fired multiple setState in sequence and commented what's going on behind (what drives the behavior of overriding the property is this merge between _pendingState and partialState). I don't know if this was exactly your question (if this does not helps you, i hope it helps someone :smile: )

Regarding the questions, check this comment on setState:

   * There is no guarantee that `this.state` will be immediately updated, so
   * accessing `this.state` after calling this method may return the old value.
   *
   * There is no guarantee that calls to `setState` will run synchronously,
   * as they may eventually be batched together.  You can provide an optional
   * callback that will be executed when the call to setState is actually
   * completed.

[justin808]

Hi @cirocosta, I changed my UI around. I don't have any more to share than the original comment. I'm 100% sure that setting the state from the onBlur, which set a state such that a button would not display, would result in the button's onClick from being called.

[BJK]

It appears that this is still an issue. We encountered this while trying to have different parts of form validation happen on both the onBlur and the onClick. It seems that if you change the DOM with some state effected by the onBlur, when it is ABOVE the button containing the onClick, the onclick will not fire.

See this http://jsfiddle.net/kb3gN/11477/ which is a variation on the example provided above. If you enter some text, you'll have to click the button twice, to see click: true.

Will create a new issue and reference this one.

[twall]

I'm seeing this issue where a setState within an onBlur which happens as a result of clicking a link (the cursor is in an input field w/focus when the link is hit) results in the link click being ignored.

[master117]

The issue of setState in onBlur preventing other click events is still happening.

[CorleoneYu]

I have an input with onBlur and a menu whith onClick like this:

<input onBlur={handleBlur} />
<Menu onClick={handleClick} />

when setState in handle blur, the handle Click will not fire

[gaearon]

If there is still an issue please file a new issue with a minimal repro case. Commenting in closed issues is not helpful — there are thousands of them and nobody is keeping track.