custom input live debounce
How to add debounce feature to custom filament field
->live(debounce:500)
By default it does work..
8 Replies
->live(debounce: 500)
should work fine,
might be theres no space in your version
are you using
applyStateBindingModifiers?
https://filamentphp.com/docs/3.x/forms/fields/custom#obeying-state-binding-modifierslive() is working.. which sends too many requests...
debounce is not in action..
If it should work, Let me try again.. anything wrong on my side
Yes used.. then only the live part is working.. but not debounce
What about onBlur: true
onBlur also same.
Below is the custom component, Basically a range slider along with the input field which can be edited and displayed formatted.
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
<div x-data="{
value: $wire.{{ $applyStateBindingModifiers("$entangle('{$getStatePath()}')") }},
get formattedValue() {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(this.value);
},
updateValue(event) {
let rawValue = event.target.value.replace(/[^0-9]/g, '');
this.value = rawValue ? parseInt(rawValue) : 0;
$refs.inputField.value = this.formattedValue;
}
}" x-init="$watch('value', val => $refs.inputField.value = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(val))">
<x-filament::input.wrapper>
<x-filament::input type="text" x-ref="inputField" @input.debounce.500ms="updateValue($event)"
x-bind:value="formattedValue" />
</x-filament::input.wrapper>
<div class="slider-container relative -mt-2">
<input type="range" :min="{{ $getMinValue() }}" :max="{{ $getMaxValue() }}" :step="{{ $getStep() }}"
x-model="value" class="slider w-full">
</div>
</div>
</x-dynamic-component>
It's about a custom field, not Filament fields
Thanks..
So I have to customize livewire wire:model
I was answering to toeknee. I'm not sure about the solution