F

Filament•2y ago

Mike

Custom view OTP input not working(no js execution)?

I'm trying to add the following tailwind otp input into a custom page view but the javascript part is not running https://flowbite.com/docs/forms/number-input/#pin-code-input

This is my code, i have tried a lot of version but none works. Funnily i had no issues with other js i added in the view. Any help appreciated.
Edit: The issue happens because this is a secondary form after the initial so i suppose livewire is not running the JS code. I even tried livewire:load as below:

@push('scripts')
<script>
document.addEventListener('livewire:load', function () {
function focusNextInput(el, prevId, nextId) {
if (el.value.length === 0) {
if (prevId) {
document.getElementById(prevId).focus();
}
} else {
if (nextId) {
document.getElementById(nextId).focus();
}
}
}

document.querySelectorAll('[data-focus-input-init]').forEach(function (element) {
element.addEventListener('keyup', function () {
const prevId = this.getAttribute('data-focus-input-prev');
const nextId = this.getAttribute('data-focus-input-next');
focusNextInput(this, prevId, nextId);

// const code = Array.from(document.querySelectorAll('[data-focus-input-init]'))
// .map(input => input.value)
// .join('');
//
// document.querySelector('[wire:model="confirmationCode"]').value = code;
});
});
});

</script>
@endpush

Tailwind CSS Number Input - Flowbite

Use the number input component to set a numeric value inside a form field based on multiple styles, variants, and layouts that can be used in product pages, forms, and more