Mobile browser does not pop-up the keyboard in password input

Question

When we open the login form of our website with a browser from the phone, all inputs automatically show up the keyboard. but if the user clicks on the password input at first, the keyboard does not open, when they click on another input and then click on the password, it opens.

Our cshtml like this.

<div class="m-login__reset-password" style="padding: 20px 15px 0px 15px;">
    <div class="m-login__head">
        <h3 class="m-login__title">
            CreatePassword
        </h3>
    </div>
    <form class="m-login__form m-form" asp-controller="Account" asp-action="ResetPassword" method="post">
        <div class="m-input-icon m-input-icon--left m-input-icon--right" style="margin-bottom:10px;">
            <input class="form-control m-input m-input--pill" type="password" placeholder="Password" name="password" onclick="openKeyboard(this)" ontouchstart="openKeyboard(this)">
            </div>
        <div class="m-input-icon m-input-icon--left m-input-icon--right">
            <input class="form-control m-input m-input--pill" type="password" placeholder="ConfirmPassword" name="confirmPassword" onclick="openKeyboard(this)" ontouchstart="openKeyboard(this)">
        </div>
        <div class="m-separator m-separator--dashed m-separator--lg" style="margin: 20px 0px;"></div>
    </form>
</div>

chatgp said that add this 2 event onclick="openKeyboard(this)" ontouchstart="openKeyboard(this)"

    <script>
        function openKeyboard(input) {
            input.focus();
        }
    </script>