Question 17304 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel 8 Livewire and google places autocomplete not working

sI have a livewire form with an address field that has google places autocomplete enabled on it. Every time I select an address from the autocomplete list and move to a new input in the form the address input gets reset to the value before clicking the address I wanted.

I added wire:ignore on my field and it still gets reset to the value typed in before the click event. This is my code for the input:

<div wire:ignore id="for-input-address" class="form-group col-lg-6{{ $errors->has('address') ? ' has-danger' : '' }}">
                <label class="form-control-label" for="input-address">{{ __('Home address') }}</label>
                <input wire:model="address" type="text" name="address" id="input-address" class="form-control form-control-alternative{{ $errors->has('address') ? ' is-invalid' : '' }}" placeholder="{{ __('Home address') }}" value="{{ old('address') }}" required autofocus>

                @if ($errors->has('address'))
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $errors->first('address') }}</strong>
                    </span>
                @endif
            </div>

So if I type 56 and select the address the moment I move to the next field the input gets reset to 56.

I want to say I have some select fields with wire:ignore that work just fine when livewire reloads the DOM.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up using livewire events, documented here: https://laravel-livewire.com/docs/2.x/events in my blade file and I fired an event on google autocomplete "place_changed" like so

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
    Livewire.emit('addressUpdated', addressAndTown, postcode);
});

    and in my controller I did the following before the submit function

    public function addressUpdated($address, $postcode)
{
    $this->address = $address;
    $this->postcode = $postcode;
}

    and updated my values in the controller


  2. 0

    Put an additional attribute to your input -> autocomplete="off" to tell the browser not to use any autocomplete mechanisms.

    See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

    Login or Signup to reply.
  3. 0

    You can basically manually ‘wire:model’ the changed data to the desired public var. eg:

    google.maps.event.addListener(autocomplete, 'place_changed', function(d) {
    var place = autocomplete.getPlace();
    @this.place_id = place.place_id;
});

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search