How to debounce entangled x-model?

i created a custom field. this is how i entangle the state:

x-data="{ state: $wire.entangle('{{ $getStatePath() }}').defer }"

x-data="{ state: $wire.entangle('{{ $getStatePath() }}').defer }"

but like this i cant get the state when i apply afterStateUpdated on my filament form field. if i make it like this (without defer), it works:

x-data="{ state: $wire.entangle('{{ $getStatePath() }}') }"

x-data="{ state: $wire.entangle('{{ $getStatePath() }}') }"

but obviously i dont want it this way, since im calling an api and dont wanna call it every second, so this is what im trying now:

x-data="{ state: $wire.entangle('{{ $getStatePath() }}').live.debounce.500ms }"

x-data="{ state: $wire.entangle('{{ $getStatePath() }}').live.debounce.500ms }"

but it doesnt work what im doing wrong?? im checking this docs: https://livewire.laravel.com/docs/wire-model#all-available-modifiers https://livewire.laravel.com/docs/alpine#sharing-state-using-wireentangle

26 Replies

ericmpOP•5mo ago

bump

awcodes•5mo ago

Try this state: $wire.{{ $applyStateBindingModifiers("entangle('{$statePath}')") }}

ericmpOP•5mo ago

i try: x-data="{ state: $wire.{{ $applyStateBindingModifiers("entangle('{$statePath}')") }} }" i get: Object of class Closure could not be converted to string im on v2 sorry

awcodes•5mo ago

oh.

ericmpOP•5mo ago

wrong tag praying to upgrade the project to v3 but cant yet 😢

awcodes•5mo ago

state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')', lazilyEntangledModifiers: ['defer']) }},

look at the filament form components to see how it is applying things. that example is from the TextInput in v2

ericmpOP•5mo ago

i tried to see it in the richeditor idk why but i wasnt lucky finding it so now, with this change, what i can achieve? so far doesnt crash i can use ->reactive() ?

awcodes•5mo ago

yes reactive makes the field live

ericmpOP•5mo ago

yes, so i can debounce it now i guess, im gonna search how to

awcodes•5mo ago

probably ->debounce() instead of ->reactive() don't fully remember in v2 or ->reactive(debounce: 500)

ericmpOP•5mo ago

yeah smth like that

ericmpOP•5mo ago

thanks a lot @awcodes 🙏 im keeping it lke this ->debounce(delay: '1000ms') for now. it works nice. i may want it to be updated on blur, how would be the walkaround? triyn to find ->onblur or something similar

awcodes•5mo ago

i think it's ->lazy() for blur in v2

ericmpOP•5mo ago

seems im still doing something wrong. i have it like this now:

GooglePlaceInput::make('destination')
    ->label(__('Destination'))
    ->required()
    ->reactive()
    ->debounce(delay: '1000ms')
    ->afterStateUpdated(function (callable $get, callable $set): void {
        $set('distance', '2'); // test after 1sec
    }),
Forms\Components\TextInput::make('distance')->disabled(),

GooglePlaceInput::make('destination')
    ->label(__('Destination'))
    ->required()
    ->reactive()
    ->debounce(delay: '1000ms')
    ->afterStateUpdated(function (callable $get, callable $set): void {
        $set('distance', '2'); // test after 1sec
    }),
Forms\Components\TextInput::make('distance')->disabled(),

i expected the distance field to be updated but it doesnt x-data is set like this https://discord.com/channels/883083792112300104/1257990350581137448/1258051938851881122 and i also tried to add reactive to 'distance' text input but doesnt make any differecne if i use debounce(), i still need to use reactive()? i tried it with and without reactive(), same result and i tried debounce without param too, but same result if i remove the debounce, it is live (but i want it to debounce) and yep, it is

awcodes•5mo ago

seems ok to me maybe because distance is disabled? not totally sure.

ericmpOP•5mo ago

just checked it, noup i havent told u something. the state is not being set directly by typing in the input this is how it works: user types (for example): Sagrada Familia then i call google maps api to get the full place name (Sagrada Familia, street random, Barcelona) and then i set the state with that new name so not sure if the debounce is not able to listen to it, cuz maybe debounce is only meant for the input itself, and not the internal x-model value not sure if i explain myself, let me know plz

awcodes•5mo ago

do you have spatie Ray?

ericmpOP•5mo ago

no (yet : )

awcodes•5mo ago

ok, you could try a dd() in afterStateUpdated(), make sure that is getting called. sometimes dd's don't work in the callbacks though. that's where ray would help. 🙂

ericmpOP•5mo ago

i can do info('inside afterstateupdated') too i guess, right?

awcodes•5mo ago

maybe? lol

ericmpOP•5mo ago

xddd why lol? well, yeah it doesnt dd neither log 🤔

awcodes•5mo ago

can you share your whole blade code?

ericmpOP•5mo ago

can i do it via private msg? i dont have any compromised data to share but i prefer to not share the full component here the blade is nothing special but yeah 😅 then we can continue the conversation here for sure if u up to 🙌

awcodes•5mo ago

that's fine but it helps to have it here, so other's having the same issue can find a solution.

ericmpOP•5mo ago

yeah i know. if someone has the problem and we find a solution, i dont mind to help. for future viewers, ping me if needed xd

Gaming

Programming

How to debounce entangled x-model?