Jemt / Fit.UI

Fit.UI is a JavaScript based UI framework built on Object Oriented principles
http://fitui.org
GNU Lesser General Public License v3.0
19 stars 7 forks source link

Input (DesignMode): Enabled(false) does not prevent editor from gaining focus and firing OnBlur #145

Closed FlowIT-JIT closed 2 years ago

FlowIT-JIT commented 2 years ago

Consider the following example:

var editor = new Fit.Controls.Input();
editor.DesignMode(true);
editor.Width(550);
editor.Height(300);
editor.OnFocus(function(sender) { console.log("Focused!"); });
editor.OnBlur(function(sender) { console.log("Focus lost!"); });
editor.Value("Hello world - <a href='https://fitui.org'>click here to vist Fit.UI</a>");
editor.Enabled(false);
editor.Render(document.body);

Even though the editor is disabled, clicking it and then clicking outside the editor will cause OnBlur to fire.

What's more, if editor has focus when Enabled(false) is invoked, the editor does not remove focus from the control, nor does it fire OnBlur as expected:

var defaultValue = "<p>Hello world - <a href='https://fitui.org'>click here to vist Fit.UI</a></p>\n\n<p>Enter 3 characters to make editor disable itself. Notice how focus is not removed from editor and OnBlur does not fire. OnBlur fires when clicking outside the editor though.</p>";
var editor = new Fit.Controls.Input();
editor.DesignMode(true);
editor.Width(550);
editor.Height(300);
editor.OnFocus(function(sender) { console.log("Focused!"); });
editor.OnBlur(function(sender) { console.log("Focus lost!"); });
editor.OnChange(function(sender) { editor.Enabled(editor.Value().length < (defaultValue.length+3));  });
editor.Value(defaultValue);
editor.Render(document.body);

setInterval(function()
{
    console.log("Element currently focused:", Fit.Dom.GetFocused());
}, 1000);

Make sure all controls supporting Enabled(boolean) implements the following behaviour:

Enabled(false): 1) Must remove focus from control (elm.blur()) if control is currently focused 2) Must fire OnBlur if control is currently focused 3) Must prevent control (and any child DOM element within) from gaining focus again while disabled

FlowIT-JIT commented 2 years ago

Fixed with commit https://github.com/Jemt/Fit.UI/commit/a95707e00d8cb506f2c7e272fc5f4cfd68c262a1