[w3c/selection-api] Inconsistent selectionchange event behavior across browsers when the added input element is not focused (Issue #344)

The `selectionchange` event behaves inconsistently across browsers when a new `<input>` element is added to the document. 

Specifically, there is a difference between Chrome and Firefox/Safari regarding whether the event is triggered when an `<input>` element is created and is not focused.

- **Chrome**: When going to a page with a `<input>` element, the `selectionchange` event is always triggered once, regardless of whether the `<input>` element is focused or not.

- **Firefox/Safari**: The `selectionchange` event is not triggered unless the newly added <input> element is focused like we manually choose it by the mouse.

see the below simple case (contributed by joe@udecode.dev in chromium issue@[389368412](https://issues.chromium.org/issues/389368412)):
```
<html>
  <head>
    <script>
      let appendingInput = false;

      const appendInput = () => {
        appendingInput = true;
        const input = document.createElement('input');
        input.value = 'Bug: Adding an input element with a value to the DOM triggers selectionchange';
        document.body.appendChild(input);

        setTimeout(() => {
          appendingInput = false;
        });
      };

      document.addEventListener('selectionchange', (event) => {
        // Only show the message in response to the bug
        if (appendingInput) {
          console.warn('selectionchange while appending input', event);
        }
      });
    </script>
  </head>
  <body>
    <button type="button" onclick="appendInput()">Append input</button>
  </body>
</html>
```

Do we need to align the expected behavior of this situation?

Thanks!

 

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3c/selection-api/issues/344
You are receiving this because you are subscribed to this thread.

Message ID: <w3c/selection-api/issues/344@github.com>

Received on Monday, 20 January 2025 08:05:39 UTC