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
2 Replies
@push not working with late rendering. You need to keep the code without @push or save it in a JS file and load it. You can take a look how plugins works to know how to achieve that.
Also, try #hasan-ahani-otp-input if it applicable for you.
@MohamedSabil83 Thank you, gonna test things out in a bit. between how can i add the otp input in the custom view?