Defects of floating widgets in a Bryntum Grid inside a lightning-modal

[chuckn0rris]

Need to test floating containers in lightning-modal container. Please see post for user screenshots.

Forum post

Hi reaching out from Certinia (formerly FinancialForce).

We have been seeing a few defects since we started using Bryntum Grid inside a modal made by ourselves following the guidelines established in SLDS. We noticed that these problems were being caused by the use of slds-modal__container class specifically because of the css property applied: [b]transform: translate(0,0)[/b]

Until now we have been making patches to overrides these problems ourselves given that the problem was hapenning while using the grid in our own modal component. But since Winter'23 Salesforce has introduced the lightning-modal component that basically implements the guidelines for modal of SLDS too.

Given that now these problems can be reproduced in an official component from salesforce, we are passing all the info related to them. Now I will proceed to list the defects we have found attaching resources related to them. Pls notice that the order in which these are listed doesn't have meaning, also point out that we are currently using [b]Bryntum Grid v5.5.2[/b], but the first issue was raise back when were using Bryntum Grid v4.0.6.

[b]Defects found: [/b]

[b][i][u]Offset applied to any floating widget used.[/u][/i][/b] To reproduce this issue you need: [b]lightning-modal[/b], [b]bryntum grid[/b] and a column which make use of a floating widget such as [b]combo or dateField[/b].

[b]Steps to reproduce:[/b]

• Place bryntum grid with combo/dateField columns inside the body of a lightning-modal.
• Open your lightning-modal.
• Click to make your floating widget appear, also you can too right click the column to open the menu.
• See how an offset, equal to the width from the browser screen border to our lightning-modal is applied.

[u]See attached: offsetWidgetCase1-4[/u]

[b][i][u]Widgets slides off the screen if close enough to a modal border[/u][/i][/b] To reproduce this issue you need: [b]lightning-modal[/b], [b]bryntum grid[/b] and a column which make use of a floating widget such as [b]combo or dateField[/b].

[b]Steps to reproduce:[/b]

• Place bryntum grid with dateField columns inside the body of a lightning-modal.
• Open your lightning-modal.
• Click next to lightning-modal edge to make your floating widget appear partially outside of the modal.
• See how the part of the widet/menu that is not inside of the modal is not being shown.

[u]See attached: slideOffCase1-3[/u]

[b]Offset applied to a dropdown when next to bottom browser screen border[/b] This[b] last could be the first one listed[/b], but I included as we needed to treated separately and pay attention to this special case.

To reproduce this issue you need: [b]lightning-modal[/b], [b]bryntum grid[/b] and a column which make use of a [b]combo widget[/b].

[b]Steps to reproduce:[/b]

• Place bryntum grid with combo columns inside the body of a lightning-modal.
• Open your lightning-modal.
• Reduce your browser screen height so the bottom border is close to the last rows of the grid.
• Open combo so it shows dropdow list.
• See how dropdown list has offset applied.

[u]See attached: comboCloseToBorderCase1[/u]

[u][i][b]SOLUTIONS WE FOUND:[/b][/i][/u]

We found that the problem was located in alignTo fn of class Rectangle, so with the code I attached we managed to solve all of the issues mentioned above:

[code] import Override from 'yourPath/bryntum/lib/Core/mixin/Override'; import DomHelper from 'yourPath/bryntum/lib/Core/helper/DomHelper'; import Rectangle from 'yourPath/bryntum/lib/Core/helper/util/Rectangle';

class RectangleOverride { static get target() { return { class: Rectangle, }; }

/*
 * @override Rectangle.prototype.alignTo()
 */

alignTo(spec) {
    const { source, constrainTo } = spec;

    let boundingRect;

    // In regards of condition: constrainTo?.lastDomConfig?.className.toString().includes('b-float-root') 
    // The original alignment was incorrect when the 'alignTo' function was used
    // with a constraint rectangle that was neither 'window' nor 'document'.
    // 'lastDomConfig' was used to detect and address this issue.
    // This solves 'Offset applied to a dropdown when next to bottom browser screen border' problem
    if (
        constrainTo === window ||
        constrainTo === document ||
        constrainTo?.lastDomConfig?.className
            .toString()
            .includes('b-float-root')
    ) {
        const rootEl = DomHelper.getRootElement(source.element);
        const floatRoot = rootEl.querySelector('.b-float-root');

        if (floatRoot) {
            boundingRect = Rectangle.from(floatRoot);

            // Constrain to the float root element instead of window/body
            // as the viewport may be clipped by the slds-modal_container.
            //
            // Fixes 'Widgets slides off the screen if close enough to a modal border' problem.
            spec.constrainTo = floatRoot;
        }
    }

    const result = this._overridden.alignTo.call(this, spec);

    if (boundingRect) {
        const { x } = boundingRect;

        // Compensate for the position shift
        // caused by slds-modal__container's
        // CSS transform: translate(0, 0);
        //
        // Fixes 'Offset applied to any floating widget used' problem.
        result.translate(-x, 0);
    }

    return result;
}

}

Override.apply(RectangleOverride);

[/code]

[amurashincertinia]

Just a quick comment on this.

This line:

constrainTo?.lastDomConfig?.className
            .toString()
            .includes('b-float-root')

should really be

constrainTo?.classList?.contains('b-float-root')

Looks much nicer with DOM API :-)

[matsbryntse]

Where do you see this line? I see no such code in our codebase.

[amurashincertinia]

It's in the suggested override.