Make OnFocus and OnBlur fire synchronously #181

FlowIT-JIT · 2023-03-03T14:27:16Z

The OnFocus and OnBlur events fire asynchronously which might cause problems.

Imagine a control having focus, and we push changes to state when OnBlur fires.
If we have a Save button which immediately persist state, then it won't persist the latest changes from our control, since OnBlur won't be able to push changes in time to be included in the payload.

We might be able to solve this with an implementation similar to this (IE not supported!):

https://jsfiddle.net/we5c6sqv/9/

<input>
<div tabindex="0" id="control">
  <span tabindex="0">
    Hello world
    <span tabindex="0">Hello world - again</span>
  </span><br>
  <input tabindex="0">
</div>
<input>

var c = document.querySelector("#control");

c.addEventListener("focusin", function(e)
{
    //console.log("Focus", e.target, e.relatedTarget, document.activeElement);
	
	var fromOutside = e.relatedTarget === null || (e.relatedTarget !== c && Fit.Dom.Contained(c, e.relatedTarget) === false);
	var receiving = e.target === c || Fit.Dom.Contained(c, e.target) === true;

    if (fromOutside && receiving)
	{
        console.log("%c --- Firing OnFocus", "color: green");
		console.log(" --- Element focused at this point: ", document.activeElement);
    }
});

c.addEventListener("focusout", function(e)
{
    //console.log("Blur", e.target, e.relatedTarget, document.activeElement);
	
	var receiving = e.relatedTarget !== null && (e.relatedTarget === c || Fit.Dom.Contained(c, e.relatedTarget) === true);

    if (receiving === false)
	{
        console.log("%c --- Firing OnBlur", "color: blue");
		console.log(" --- Element focused at this point: ", document.activeElement);
    }
});

/*c.addEventListener("blur", function(e)
{
    console.log("OnBlur - Element focused at this point: ", document.activeElement);
});*/

div, span, input
{
  display: inline-block;
  border: 1px solid red;
  margin: 0.5em;
}

div
{
  border: 2px solid green;
}

*:focus
{
  outline: 2px solid blue;
}

The text was updated successfully, but these errors were encountered:

FlowIT-JIT · 2023-03-03T14:55:24Z

Notice that when onfocusout (or onblur for that matter) fires, focus has not yet been assigned to another element, so document.activeElement will temporarily return <body>, as the example demonstrates. So if we want to be able to obtain the element soon to be focused, we might need to provide it to the event handlers like demonstrated below.
control.OnBlur(function(sender: Fit.Controls.ControlBase, args: { Target: HTMLElement, Origin: HTMLElement | null }) {});
Basically we just need to forward e.target and e.relatedTarget.

FlowIT-JIT · 2023-03-10T10:21:06Z

Example improved to prove it respects expected event order when control lose focus:
OnMouseDown => Control's OnBlur => OnMouseUp => OnClick
https://jsfiddle.net/6qzenLcg/

FlowIT-JIT added enhancement redesign labels Mar 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make OnFocus and OnBlur fire synchronously #181

Make OnFocus and OnBlur fire synchronously #181

FlowIT-JIT commented Mar 3, 2023 •

edited

Loading

FlowIT-JIT commented Mar 3, 2023 •

edited

Loading

FlowIT-JIT commented Mar 10, 2023 •

edited

Loading

Make OnFocus and OnBlur fire synchronously #181

Make OnFocus and OnBlur fire synchronously #181

Comments

FlowIT-JIT commented Mar 3, 2023 • edited Loading

FlowIT-JIT commented Mar 3, 2023 • edited Loading

FlowIT-JIT commented Mar 10, 2023 • edited Loading

FlowIT-JIT commented Mar 3, 2023 •

edited

Loading

FlowIT-JIT commented Mar 3, 2023 •

edited

Loading

FlowIT-JIT commented Mar 10, 2023 •

edited

Loading