Why does the input event run twice and show the previous value in Firefox for Android?

Question

I am trying to remove invalid characters and convert them to uppercase;

If you run the code on latest Firefox for Android, the input event will be fired twice and the input value will be duplicated.

But if you remove any manipulations (toUpperCase or replace), then the problem disappears.

Test case one (with the problem)

var input = document.getElementById("a");
input.addEventListener("input", ()=>{
    //input.value = input.value.toUpperCase();
  //input.value = input.value.replace(/[^A-Z]/gi);
  input.value = input.value.toUpperCase().replace(/[^A-Z]/gi, '');

  console.log("event");
});

<input id="a" type="text">

Test case two (without the problem)

var input = document.getElementById("a");
input.addEventListener("input", ()=>{
    //input.value = input.value.toUpperCase();
  input.value = input.value.replace(/[^A-Z]/gi, '');
  //input.value = input.value.toUpperCase().replace(/[^A-Z]/gi, '');

  console.log("event");
});

<input id="a" type="text">

What is the reason of the behavior and how to fix it?

EDIT:: Screenshot for clarity. I entered "ABC"

EDIT 2: It looks like this code is causing a problem on apple mobile devices - when clicking on keyboard hints, these hints are not used. A temporary solution is to use filtering (replace) at the input event, and use uppercase - through the focusout or via css (text-transform: uppercase) and further transformation on the server