Dynamic form with Overflow.HIDDEN shifted when a form item has focus

[abika]

Hi, we have a layout problem with dynamic form when it is overlapped by a split pane. Consider the (complete example)

    @Override
    public void onModuleLoad() {
        HLayout layout = new HLayout();
        layout.setWidth100();
        layout.setHeight100();
        layout.setResizeBarSize(5);
        layout.setOverflow(Overflow.HIDDEN);

        VLayout leftSide = new VLayout();
        leftSide.setShowResizeBar(true);
        leftSide.setResizeBarTarget("next");

        DynamicForm dynamicForm = new DynamicForm();
        dynamicForm.setOverflow(Overflow.HIDDEN);

        TextItem textItem = new TextItem();

        ComboBoxItem comboBoxItem = new ComboBoxItem();
        Map<Object, String> valueMap = new HashMap<>();
        valueMap.put("A", "some text for A");
        valueMap.put("B", "some text for B");
        comboBoxItem.setValueMap(valueMap);
        comboBoxItem.setWidth(200);

        dynamicForm.setItems(textItem, comboBoxItem);
        leftSide.addMember(dynamicForm);
        layout.addMember(leftSide);

        VLayout rightSide = new VLayout();
        rightSide.setBackgroundColor("red");
        layout.addMember(rightSide);

        layout.show();
    }

As long as the form items are not focused it is working as expected and the resize bar can be moved over the dynamic form. But after focusing the text item, when moving the split bar over the items, the whole dynamic form is shoved to the left.
For the combobox another undesired behaviour can be seen: Move the split bar half over the combobox, select the combobox, type "s" and select one of the items. The dynamic form is now also instantly shoved to the left.

Only in Chrome (version 81)! In Firefox the overflow is always respected.

Is there a way to prevent the dynamic form being moved to the left? Or can this be fixed?
Thanks!

(Version: v12.0p_2018-07-12/LGPL Development Only (built 2018-07-12))

[Isomorphic]

We don't know what you mean by "shoved over to the left".

However, before explaining that, try the latest patched build, and please do not report problems against builds that are nearly two years out of date.

[abika]

True, our SmartGWT version was outdated. We updated to 12.1 (v12.1p_2020-04-28/LGPL Development Only (built 2020-04-28)) and still have the same issue.

Here is a screenshot after the split bar was moved to the left over the dynamic form. It is as expected.

Screenshot after the split bar was moved to the left over the dynamic form after focusing the text item. The dynamic form is moved to the left out of the browser view (the left edge of the screenshot is the left edge of the browser window) and the field titles are not fully visible anymore.

Again, the dynamic form is only moved to the left in Chrome. In Firefox the position of the dynamic form stays fixed (like in the first screenshot), regardless of whether a form item has focus or not.

[Isomorphic]

In that first screenshot, you have not successfully resized the form, it's just partially hidden. Then when focus is applied, the browser natively tries to bring the entire focused field into view.

The browser needs to do this for accessibility reasons, because otherwise, the text cursor could end up invisible. So Firefox should actually be doing something like what Chrome is doing, and it might do so if you entered a sufficiently long value in the field.

The correct solution is to either:

1. set up the form so that the FormItems are resizable (eg width:"*" on them) - see Form Layout overview

and/or

2. set the form to overflow:"auto" so that scrolling is allowed if it's too small for the items