AbstractOrderedLayoutConnector removes its child from DOM when adding or removing their caption

[vaadin-bot]

Originally by keem

---

I have two TextFields inside a VerticalLayout (or HorizontalLayout). If I add a ValueChangeListener to the TextFields, which calls field.setRequired(!field.setRequired) to the other TextField, the TextField is removed from the DOM of the AbstractOrderedLayoutConnector.

In the result, if I use tabulator for changing focus between the Fields, the focus is lost (and not even a BlurEvent is fired) when the second TextField is entered. This happens at least when the second field is empty.

This is related to our Vaadin Pro support ticket #365, which was handled by Pekka Hyvönen. Originally our problem was with IE8, because we could work around the bug with FocusListener and BlurListener with other browsers except IE8. However, if I understand correctly, the bug itself is not browser-related. I'm not sure about this, but Pekka knows about it.

Another bug that is apparently already being taken care of related to this is in TextField. When a TextField gets focus and at the same time its required status is changed, the cursor is relocated to the beginning of the field at least with IE8. Apparently, this is because the value of TextField is always set in stateChangeEvent, even if the value was not changed. Pekka told me this bug does not need its own ticket as it is already being repaired, it's just not been tested.

---

Imported from https://dev.vaadin.com/ issue #12967

[vaadin-bot]

Originally by @tsuoanttila

---

Creating or removing a caption removes the element from DOM. This does not occur when TextField has setRequired(true). Same happens when setRequired changes with no caption set.

public class TextFieldCaptionRemove extends UI {

    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        final TextField tf1 = new TextField("field1");
        final TextField tf2 = new TextField("field2");
        tf1.setImmediate(true);
        tf2.setImmediate(true);
        tf1.addValueChangeListener(new ValueChangeListener() {
            public void valueChange(ValueChangeEvent event) {
                tf2.setCaption(null);
            }
        });
        layout.addComponent(tf1);
        layout.addComponent(tf2);
        setContent(layout);
    }

}

[vaadin-bot]

Originally by @Artur-

---

Just to be clear, is the issue that focus is lost when making some change which adds/removes the caption WHILE the focus is being moved from one field to another?

[vaadin-bot]

Originally by keem

---

We experienced this when the required flag was changed while the focus was being moved from one field to another. I'm not sure whether in our case caption was set or not, but anyway I think that caption was not changed during the operation.

[vaadin-bot]

Originally by @tsuoanttila

---

You can workaround this by setting a caption for the TextField. If you do not want this caption to be visible you can hide it with CSS by doing the following.

In Java:

textField.setCaption("");
textField.addStyleName("hidden");

In theme:

.v-caption-hidden .v-captiontext { display: none; }
.v-caption-hidden { float: right; }

This should make the textfield look exactly like before and get rid of your focus problems.

[vaadin-bot]

Originally by @Artur-

---

AbstractOrderedLayout should be able to get the focused element (active element) before modifying the DOM and then re-setting focus afterwards if the same element is no longer focused (was inside the moved DOM element)