Livewire 2 - 3. Form field will not update

I have a form which essentially has two (It has more but they aren't relevant) fields.

Name is an account name
Subdomain should be a sluggified version of Name.

Before upgrading to V3 this was working by using the updated method as below.

public function updated($propertyName)
    {
        $this->validateOnly($propertyName);

        if($propertyName == 'name') {
            $this->subdomain = Str::slug($this->name);
        }
}

The view looks like this

<div class="grid grid-cols-2 gap-4">
  <div>
    <label for="name" class="frm-label">{{ __('Client Name') }}</label>
    <input wire:model.live="name" type="text" class="frm-field">
    @error('name') <span class="error ct-red">{{ $message }}</span> @enderror
  </div>
  <div>
    <label for="name" class="frm-label">{{ __('Subdomain') }}</label>
    <input wire:model="subdomain" type="text" class="frm-field">
    @error('subdomain') <span class="error ct-red">{{ $message }}</span> @enderror
     {{ $subdomain }} <!-- << This is here just to display the subdomain, this shows perfectly -->
         </div>
</div>

I have made various changes back and forth trying various things but nothing seems to work. Currently, I've just added .live to the model declaration The actual Subdomain property is updated and is shown below the field but the form field will NOT update.

Does anyone have any thoughts?

LaryAI

2 years ago

Level 58

It seems like you're facing an issue where the subdomain field is not being updated in the form when the name field changes. Since you've mentioned that the subdomain property is updated and shown below the field, it indicates that the Livewire component's property is being updated correctly, but the change is not reflected in the input field itself.

One potential issue could be related to Livewire's DOM-diffing engine. When Livewire updates the DOM, it tries to be smart about not updating parts of the DOM that it thinks haven't changed. If Livewire's DOM-diffing engine mistakenly thinks the input hasn't changed, it won't update it.

To ensure that the input field is updated when the subdomain property changes, you can use the wire:key directive to help Livewire identify that the input needs to be updated. Here's how you can modify your input field for the subdomain:

<div>
    <label for="subdomain" class="frm-label">{{ __('Subdomain') }}</label>
    <input wire:model="subdomain" wire:key="subdomain_field" type="text" class="frm-field">
    @error('subdomain') <span class="error ct-red">{{ $message }}</span> @enderror
    {{ $subdomain }} <!-- This is here just to display the subdomain, this shows perfectly -->
</div>

By adding wire:key="subdomain_field", you're giving a unique key to the input field, which should help Livewire recognize when it needs to be updated.

Additionally, ensure that you have imported the Str facade at the top of your Livewire component if you haven't already:

use Illuminate\Support\Str;

If the issue persists, you can also try to force a re-render of the component by calling $this->emitSelf('refreshComponent') after updating the subdomain property:

public function updated($propertyName)
{
    $this->validateOnly($propertyName);

    if ($propertyName == 'name') {
        $this->subdomain = Str::slug($this->name);
        $this->emitSelf('refreshComponent'); // Force a re-render of the component
    }
}

This will emit an event that the component itself is listening for, and when it hears it, it will re-render, ensuring that the latest subdomain value is reflected in the input field.

Lastly, make sure that the name attribute of the subdomain input field is set correctly. In your provided code, both input fields have for="name" in their labels, which might be a typo. The subdomain input should have for="subdomain":

<label for="subdomain" class="frm-label">{{ __('Subdomain') }}</label>

Try these suggestions, and hopefully, your subdomain field will update as expected when the name field changes.

lyleyboy

2 years ago

Level 16

@LaryAI The reply doesn't quite work. The emitSelf() method doesn't exist in V3. I did change that for the dispatch() method.

Sadly nothing changed, the property was updated but the form field remains blank.

shyberry

2 years ago

Level 1

@lyleyboy good day! have you found a solution to this concern already? Maybe you can share because I am also having the same problem. Thanks

shyberry

1 year ago

Level 1

@lyleyboy this is what i discovered, try inserting a value attribute for your input element and you might also need to make your wire model live, like this:

<input wire:model.live="subdomain" type="text" class="frm-field" value="{{$subdomain}}">

Dawerso

1 year ago

Level 1

Same issue here, any solutions?

shyberry

1 year ago

Level 1

Try inserting a value attribute for your input element and you might also need to make your wire model live, like this:

<input wire:model.live="subdomain" type="text" class="frm-field" value="{{$subdomain}}">

Please or to participate in this conversation.