Kotlin/NextJs - Webview loses input focus after typing

JavaScript
1

Hello and thank you for taking the time.

I have built an application in NextJs. This is based on NodeJS in the backend and React in the front end.
Since I would like to have the application in the Appstore, I thought “Android Studio on, WebView over and off you go”.
This works quite well so far, but since I have a login upstream, I now have a problem. With the <input> the focus jumps away after the “KeyUp”. It looks as if I am then writing backwards (RTL). So instead of “Hello” it says “olleH”.
It is not due to RTL or LTR, you can see that the cursor jumps forwards after each letter. If I click on the input field again and then write the letters one after the other, it works. But this is not the solution.

React-Code:

"use client";
import { useState } from "react";
import { authenticate } from "@/actions/login";
import { useFormState, useFormStatus } from "react-dom";
import Link from "next/link";
import { useRef } from "react";

export default function RegisterForm({ change }) {
  
  const [inputType, setInputType] = useState("password");


  const [errorMessage, dispatch] = useFormState(authenticate, undefined);

  function showPassword() {
    setInputType(inputType == "password" ? "text" : "password");
  }

  return (
    <>
      <div className="login-email text-white">
        <div
          className="top-bg"
          style={{
            backgroundImage: "url(loginBG.png)",
            backgroundPosition: "top",
            backgroundRepeat: "no-repeat",
            borderBottomLeftRadius: "45%",
            borderBottomRightRadius: "45%",
            backgroundSize: "cover",
            height: "250px",
            isolation: "isolate",
            color: "white",
          }}
        ></div>
        <div className="login-card">
          <div className="login-logo">
            <img className="img-fluid logo" src="allSport.png" alt="" />
          </div>
          <form action={dispatch}>
            <div className="input-box">
              <i className="bi bi-mailbox"></i>
              <input
                type="email"
                name={"email"}
                placeholder="E-Mail"
                required={true}              
              />
            </div>
            <div className="input-box">
              <i className="bi bi-lock"></i>
              <input
                id={"password"}
                type={inputType}
                name={"password"}
                minLength={8}
                maxLength={30}
                dir={"ltr"}
                placeholder="Passwort"
              />
              <i className={"bi bi-eye"} onClick={showPassword}></i>
            </div>

            <LoginButton disabled={false} />
          </form>
          <div className="text-center mt-2 text-white">
            Noch keinen Account?{" "}
            <div onClick={() => change(false)} className="text-blue">
              Registrieren
            </div>
          </div>
          <Link className={"" + "text-white"} href={"/impressum"}>
            Impressum
          </Link>
        </div>
      </div>
      {errorMessage && (
        <>
          <div className="h-5 w-5 text-red-500">
            <p className="text-sm text-red-500">{errorMessage}</p>
          </div>
        </>
      )}
    </>
  );
}

function LoginButton({ disabled }) {
  const { pending } = useFormStatus();

  return (
    <button
      disabled={disabled}
      className="gradient-btn-full"
      aria-disabled={pending}
    >
      Login
    </button>
  );
}

Kotlin Code:

import......

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SportyMilesTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    WebViewPage(url = "https://sportymiles.com")
                }
            }
        }
    }
}

@Composable
fun WebViewPage(url: String) {
    AndroidView(factory = { context ->
        WebView(context).apply {
            settings.javaScriptEnabled = true;
            settings.domStorageEnabled = true;
            settings.loadWithOverviewMode = true;

            webViewClient = WebViewClient();
            webChromeClient = WebChromeClient() // Hier wird der WebChromeClient hinzugefügt

            loadUrl(url)
        }
    }, modifier = Modifier.fillMaxSize())
}

Thank you for your Time!

Greets
Jan