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): Editor does not assume height of content when Value(..) is set while editor is hidden or not rooted #162

Closed FlowIT-JIT closed 2 years ago

FlowIT-JIT commented 2 years ago

See the following example: https://jsfiddle.net/9rbtkjwe/1/ (based on Fit.UI 2.11.1)

Run any of the 3 tests. Each test immediately changes the value of the control, but its height does not adjust. Each test then hides the editor in different ways and assigns a value while it is hidden. Once it is displayed again, the editor has not assumed the height of the new content either. Auto Grow is enabled of course. Auto grow can be enabled by either not applying a height, by applying a height with a value of -1, or by using the AutoGrow property of the DesignMode configuration object.

The editor assumes the proper height if it gains focus which almost makes the bug more annoying as it potentially changes the user interface significantly.

Code from JS fiddle:

<div>
    <div>
        <div>
            Editor must assume height of content when value is changed!<br>
            If control is visible, then height must adjust immediately.<br>
            If control is hidden, then it must adjust height "later" once<br>
            editor becomes visible again.<br><br>
        </div>
        <div id="Controls"> </div>
        <div id="Buttons"> </div>
    </div>
</div>
var controlsContainer = document.querySelector("#Controls");

function runTest(test) {
    input.Value("Executing test..");

    // Hide control by removing it from DOM
    // and the set value which should affect editor height.
    // After 1.3s show editor again by rooting it in DOM again.
    test === 1 && setTimeout(function() {
        Fit.Dom.Remove(input.GetDomElement());
        input.Value("Hello world<br>Test is complete<br>Editor must assume height of this content<br><br>Hello world<br>Test is complete<br>Editor must assume height of this content<br><br>Hello world<br>Test is complete<br>Editor must assume height of this content");
        setTimeout(function() { Fit.Dom.Add(controlsContainer, input.GetDomElement()); }, 1300);
    }, 1500);

    // Hide control using display:none
    // and the set value which should affect editor height.
    // After 1.3s show editor again by removing display:none
    test === 2 && setTimeout(function() {
        input.GetDomElement().style.display = "none";
        input.Value("Hello world<br>Test is complete<br>Editor must assume height of this content<br><br>Hello world<br>Test is complete<br>Editor must assume height of this content<br><br>Hello world<br>Test is complete<br>Editor must assume height of this content");
        setTimeout(function() { input.GetDomElement().style.display = ""; }, 1300);
    }, 1500);

    // Hide control using display:none on control's parent element
    // and the set value which should affect editor height.
    // After 1.3s show editor again by removing display:none
    test === 3 && setTimeout(function() {
        input.GetDomElement().parentElement.style.display = "none";
        input.Value("Hello world<br>Test is complete<br>Editor must assume height of this content<br><br>Hello world<br>Test is complete<br>Editor must assume height of this content<br><br>Hello world<br>Test is complete<br>Editor must assume height of this content");
        setTimeout(function() { input.GetDomElement().parentElement.style.display = ""; }, 1300);
    }, 1500);
}

function createTest(test)
{
    return function() {
        runTest(test);
    }
}

var input = new Fit.Controls.Input();
input.DesignMode(true, {
    Toolbar: {
        HideWhenInactive: true,
        Position: "Bottom"
    }
});
input.Width(400);
input.Value("Write here..<br>Write here..<br>Write here..<br>");
input.Render(controlsContainer);

for (var i = 1 ; i <= 3 ; i++) {
    var b = new Fit.Controls.Button();
    b.Title("Test " + i);
    b.OnClick(createTest(i));
    b.Render(document.querySelector("#Buttons"));
}
FlowIT-JIT commented 2 years ago

Fixed - closing issue