Weird behavior using eventlistener on a html input field on android

Question

I want my user to always type at the end of my input-field

There are a lot of ways to make sure the cursor stays at the end (Use JavaScript to place cursor at end of text in text input element) I managed to make it work but when I checked the site on my phone I got some weird behavior. When I started typing the text got doubled or something. Here is the output by just typing "abc" on my Android-phone with Chrome:

I tested it on iOS as well but that seems to work fine. Here is an example so you can test it as well. Any ideas how to fix this / work around this issue?

fst = document.getElementById("fst");
snd = document.getElementById("snd");

fst.addEventListener('beforeinput', function (evt) {
 fst.setSelectionRange(fst.value.length, fst.value.length);
});

snd.addEventListener('keydown', function (evt) {
  var tmp = snd.value;
  snd.value = "";
  snd.value = tmp;
});

Beforeinput: <input id="fst"/>
Keydown: <input id="snd"/>