Strange behavior of ComboBox with Umlaut in placeholder on IE 11 and slower machine

[RhonanMS]

Description

I have found a very strange behaviour with the ComboBox when the following conditions are met:

• Internet Explorer 11 is used on a slower machine
• There are several ComboBoxes on the page - some with preselected values, some without
• The placeholder uses an Umlaut (we could reproduce the error best with the String "Bitte wählen Sie aus"). Why this is so, we could not determine.

When these conditions are met, ComboBox element without preselected values start to open and close their item lists - sometimes without content, sometimes with the content - and repeat this from the bottom of the page to the top.
Internet Explorer 11 "flickers" between several ComboBox selections if there is a mixture of Comboboxes with preselected
values and unselected values.
This also seems to slow down the browser severely, so that a click on "Close tab" takes several seconds before the tab is closed.

There is no difference in using the Lumo or Material theme.

Expected outcome

There should be no "flickering" and no delay in the browser.

Actual outcome

The ComboBox flickering effect occurs.

Live Demo

example480p.mov

Minimal reproducible example

The effect was reproduced in the Video with this code on a Lenovo Ideapad with an older Celeron CPU on Windows 10.
It also happened on several developer machines that where common around 2018, 2019 (Core i5 and Core i7).
On a recent machine with an intel Core i7-10700K CPU the effect was not reproduceable.

import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.material.Material;

import java.util.ArrayList;
import java.util.List;

@Theme(Material.class)
@Route("/combobox")
public class ExampleComboBox extends Div {

    private List<String> exampleValues = new ArrayList<>();

    public ExampleComboBox() {
        super();

        this.initData();
        this.initView();
    }

    private void initData() {
        exampleValues.add("Unbekannt");
        exampleValues.add("Eintrag 1");
        exampleValues.add("Eintrag 2");
        exampleValues.add("Eintrag 3");
        exampleValues.add("Eintrag 4");
    }

    private void initView() {

        FormLayout formLayout = new FormLayout();

        ComboBox<String> cb1 = createComboBox(exampleValues);
        cb1.setValue("Eintrag 1");
        formLayout.add(cb1, 2);

        ComboBox<String> cb2 = createComboBox(exampleValues);
        formLayout.add(cb2, 2);

        ComboBox<String> cb3 = createComboBox(exampleValues);
        cb3.setValue("Eintrag 4");
        formLayout.add(cb3, 2);

        ComboBox<String> cb4 = createComboBox(exampleValues);
        formLayout.add(cb4, 2);

        ComboBox<String> cb5 = createComboBox(exampleValues);
        cb5.setValue("Unbekannt");
        formLayout.add(cb5, 2);

        ComboBox<String> cb6 = createComboBox(exampleValues);
        formLayout.add(cb6, 2);

        ComboBox<String> cb7 = createComboBox(exampleValues);
        cb7.setValue("Eintrag 4");
        formLayout.add(cb7, 2);

        ComboBox<String> cb8 = createComboBox(exampleValues);
        formLayout.add(cb8, 2);

        this.add(formLayout);
        this.getStyle().set("padding", "1em");
    }

    private ComboBox<String> createComboBox(List<String> items) {
        ComboBox<String> cb = new ComboBox<>();
        cb.setClearButtonVisible(false);
        cb.setPlaceholder("Bitte w\u00E4hlen Sie aus");
        cb.setItems(items);
        return cb;
    }
}

Steps to reproduce

1. Open the page in Internet Explorer 11.
2. Do not interact with it - just wait.
3. If effect does not appear - use slower machine (might be necessary to close and open IE 11 again).

Environment

• 14.7.2
• Windows 10 (several editions - Home, Pro, Enterprise) - all updated to the current version 20H2 19042.1288

Browsers Affected

• Chrome
• Firefox
• Safari
• Edge
• IE 11
• iOS Safari
• Android Chrome

[web-padawan]

IE11 is no longer supported. Closing the issue as stale.