Combobox item text position differs after selection between Chrome and Firefox.

[abdullahtellioglu]

Description

When we select an item in combobox with long text, caret stays at the start of the text in chrome but at the end in the firefox.

Expected outcome

Both Firefox and Chrome should behave the same. Chrome's behavior seems to be correct one

Minimal reproducible example

public ComponentTest(){
        ComboBox<String> comboBox = new ComboBox<>();
        List<String> items = List.of(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum orci nec erat fringilla",
                "small text",
                "t id ut justo. Nulla in maximus eros. Morbi nisi ligula, congue et leo eu, faucibus pretium magna. Etiam non mollis elit, ac luctus massa. Suspendisse tristique bibendum urna ac sagittis. "
        );
        comboBox.setItems(items);
        comboBox.setWidth("200px");
        add(comboBox);
    }

Steps to reproduce

1. Add the snipped code to a view in flow.
2. Select an item in both and chrome browsers to see difference

Environment

Vaadin version(s): 23.3.2
OS: Windows / Mac

Browsers

Chrome, Firefox

[web-padawan]

The issue can be reproduced with plain <input> - apparently it's how setSelectionRange works in Firefox:

<input id="lorem" />
<script type="module">
  const input = document.querySelector('input');
  input.focus();
  input.value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
  const pos = input.value.length;
  input.setSelectionRange(pos, pos);
</script>