ios – How do I fill the suggested OTP code above the keyboard in the input field?

On ios 15, when I entered the suggested OTP code on the keyboard, it disappeared immediately. But with ios 14 and below I don’t get this issue.

HTML

If I remove the autocomplete=”one-time-code” attribute, the autocomplete won’t work.

If I add the maxlength=”1″ attribute, the code will only be filled in the first input.

<form id="otpForm">
        <div class="container height-100 d-flex justify-content-center align-items-center">
            <div class="position-relative">
                <div class="card p-2 text-center">
                    <div id="otp" class="inputs d-flex flex-row justify-content-center mt-2">
                        <input class="m-2 text-center form-control rounded" type="text" id="first"
                            autocomplete="one-time-code" onkeyup="inputOtpKeyUpMobile()" autofocus/>
                        <input class="m-2 text-center form-control rounded" type="text" id="second" 
                            autocomplete="one-time-code" onkeyup="inputOtpKeyUpMobile()" />
                        <input class="m-2 text-center form-control rounded" type="text" id="third"
                            autocomplete="one-time-code" onkeyup="inputOtpKeyUpMobile()" />
                        <input class="m-2 text-center form-control rounded" type="text" id="fourth"
                            autocomplete="one-time-code" onkeyup="inputOtpKeyUpMobile()" />
                        <input class="m-2 text-center form-control rounded" type="text" id="fifth"
                            autocomplete="one-time-code" onkeyup="inputOtpKeyUpMobile()" />
                        <input class="m-2 text-center form-control rounded" type="text" id="sixth"
                            autocomplete="one-time-code" onkeyup="inputOtpKeyUpMobile()" maxlength="1"/>
                    </div>
                    <div>
                        <input type="submit" id="btnSubmit-mobile">
                    </div>

                </div>
            </div>
        </div>
    </form>

onkeyup() event for input

document.addEventListener("DOMContentLoaded", function (event) {
        function OTPInput() {
            let editor = document.getElementById('first');
            editor.onpaste = pasteOTP;

            let inputs = document.querySelectorAll('#otp > *[id]');
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].addEventListener("keyup", function (event) {
                    let keycode = $(this).val().charCodeAt(0);
                    if (event.key === "Backspace" || keycode === 8) {
                        inputs[i].value = "";
                        if (i !== 0) {
                            inputs[i - 1].focus();
                        }
                    } else {
                        let keycode = $(this).val().charCodeAt(0);
                        if (i === inputs.length - 1 && inputs[i].value !== "") {
                            inputs[i].value = String.fromCharCode(keycode);
                            console.log(inputs[i].value + 'a');
                            return true;
                        } else if (keycode > 47 && keycode < 58) {
                            inputs[i].value = String.fromCharCode(keycode);
                            console.log(inputs[i].value + 'b');
                            if (i !== inputs.length - 1) {
                                inputs[i + 1].focus();
                            }
                            event.preventDefault();
                        }
                    }
                });
            }
        }
        OTPInput();
    });

Handle paste event from clipboard

function pasteOTP(event) {
        event.preventDefault();
        let elm = event.target;
        let pasteVal = event.clipboardData.getData('text').split("");
        if (pasteVal.length > 0) {
            while (elm) {
                elm.value = pasteVal.shift();
                elm = elm.nextSibling.nextSibling;
            }
        }
    }

My demo