livewire 3.4 laravel 11

Level 58

It seems like you're experiencing an issue where the input field is not updating when you tab to the next field, despite the updatedBcPhone method being fired. Since you mentioned that the updated hook is firing and {{$bc_phone}} shows the correct formatting, it's likely that the issue is related to the Livewire model binding or the way the input field is being updated in the DOM.

In Livewire 3.4 and Laravel 11, the way you've set up your input field with wire:model.lazy="bc_phone" means that the model will only update when the input field loses focus (e.g., when you tab out of it). This is the expected behavior for .lazy modifier.

However, if the input field is not updating in the view, you might want to ensure that Livewire's JavaScript assets are properly included and up-to-date. Also, make sure that there are no JavaScript errors in the browser's console that could be interfering with Livewire's operation.

Here's a solution that you can try:

Ensure that Livewire's scripts are included and up-to-date in your layout file. You should have something like this before the closing </body> tag:

@livewireScripts

If you're using any JavaScript frameworks or libraries that might interfere with Livewire, make sure they are compatible and not causing conflicts.
If the issue persists, try using the wire:model.defer modifier instead of wire:model.lazy. This will update the Livewire component's property when the form is submitted, which might be more appropriate depending on your use case.
If you want the input to update as you type (without waiting for the field to lose focus), you can use wire:model without any modifiers:

<input wire:model="bc_phone" type="text" placeholder="123.555.5555" class="...">

If none of the above solutions work, you can try manually triggering a Livewire update when the input field loses focus by using the wire:change or wire:blur directive:

<input wire:model.lazy="bc_phone" wire:change="updatedBcPhone" type="text" placeholder="123.555.5555" class="...">

This will call the updatedBcPhone method when the input field changes or loses focus, ensuring that the property is updated.

Remember to clear your browser cache and run php artisan view:clear to ensure that your changes are reflected.

If you continue to experience issues, please provide more context or any error messages you're seeing, and the community can help troubleshoot further.

Level 4

@LaryAI I think this answer is for livewire <3.4 as default wire:model without modifier defaults to defer which will not work. if i add "wire:blur="updatedBcPhone" or "wire:change="updatedBcPhone" I get error: Unable to call lifecycle method [updatedBcPhone] directly on component: [products.bc] I do a pa optimize:clear npm run build npm run dev after each code revision. using jetstream and @livewireScripts was automaically added.

any more ideas?

Level 122

@azc99 Lary never replies

https://livewire.laravel.com/docs/wire-model#all-available-modifiers

Level 122

.lazy is an alias for change

Then the docs say

For example, if you want to run validation every time a select input is changed, by adding .change, Livewire will send a network request and validate the property as soon as a user selects a new option. As opposed to .blur which will only update the server after the user tabs away from the select input.

I'm not sure what you are expecting to happen. ?

Why do you change to wire:blur = "function name" and not wire:model.blur="field"`

Level 4

Why do you change to wire:blur = "function name" and not wire:model.blur="field"` that was a typo on my side. using both i.e.

wire:model.lazy="bc_phone" wire:model.blur="updatedBcPhone"

has no effect. i am trying to update the input field on the form when tabbing to next field. this worked with laravel 10 and livewire 3.1 without adding any other wire: directive. "updatedBcPhone" is firing as I see the result when adding {{$bc_phone}} in the form.

is there a breaking change causing this behavior?

public function updatedBcPhone()
    {
        $numb = $this->bc_phone;
        $this->bc_phone = (new Phone)->phoneNumber($numb);
    }

<div class="-mt-1">
            <div class="mt-1 mr-1">
              <label for="bc_phone" class="block ml-2 text-xs font-medium text-gray-500 uppercase"> Phone </label>
              <input wire:model.lazy="bc_phone" type="text" placeholder="123.555.5555"
                class="appearance-none block w-full px-3 py-2 border border-hkcolor rounded-md shadow-sm
              placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm
              {{ $errors->has('bc_phone') ? " border-2 border-red-500" : '' }}">
            </div>
            @error('bc_phone')
            <p class="mt-1 mb-6 text-sm text-red-500">{{ $message }}</p>
            @enderror
          </div>
          {{ $bc_phone }}

Thx for any input (no pun intended) you can provide.

Level 122

@azc99

wire:model.lazy="bc_phone" wire:model.blur="updatedBcPhone"

But thats crazy? It should be just `wire:model.blur="bc_phone"

Level 4

in my reply code i removed wire:model.blur="updatedBcPhone" and left in wire:model.lazy="bc_phone".

using either wire:model.blur="bc_phone" or wire:model.lazy="bc_phone" has no effect on the input field but both fire updatedBcPhone

Can't figure out why the input field doesn't change.

Level 122

@azc99 Why would it change?