Safari autofill causes submitted field to validate again while using Alpine

[generator85]

I have this weird issue, where fields that were filled using Safari autofill will be validated again right after submit. When these fields required, a error will be shown because now the field are empty.

The weird thing is that this issue only arrises when I have a AlpineJS x-data property on the field. Also when entering text using the keyboard everything works as expected.

Here is my input.blade.php file for my custom theme. The reason I added Alpine is because I need a class on the wrapper when the input is focused or has a value.

<div class="field">
  <div
    class="input @if ($errors->has($field->key)) input--error @endif"
    x-data="{
        inputType: '{{ $field->input_type }}',
        inputValue: '{{ $field->value || $field->default }}',
        hasFocus: false,
    }"
    x-bind:class="(inputValue || hasFocus || inputType === 'date') && 'input--active'"
  >
    @if ($field->show_label && $field->input_type !== 'file')
      <label
        for="{{ $field->id }}"
        class="field__label input__label @if (is_array($field->validate) && in_array('required', $field->validate)) field__label--required @endif"
      >
        {{ $field->label }} <span x-text="inputValue"></span>
      </label>
    @else
      <label
        for="{{ $field->id }}"
        class="screenreader"
      >{{ $field->label }}</label>
    @endif

    <input
      id="{{ $field->id }}"
      name="{{ $field->id }}"
      type="{{ $field->input_type }}"
      class="input__element"
      @if ($errors->has($field->key)) 
        aria-invalid="true"
        aria-describedby="{{ $field->id }}-error" 
      @endif
      x-on:focus="hasFocus = true"
      x-on:blur="hasFocus = false"
      x-on:input="inputValue = $event.target.value"
      x-init="inputValue = document.getElementById('{{ $field->id }}').value"
      wire:model.{{ $field->wire_model_modifier }}="{{ $field->key }}"
    />
  </div>

  @if ($field->instructions && !$errors->has($field->key))
    <p class="field__instructions">{{ $field->instructions }}</p>
  @else
    @include($this->component->getView('error'))
  @endif

</div>

As a quick fix, is it possible to disable validation after submit? I've tried overwriting the updated function in the BaseForm class so it doesn't validate after submit. This stops the error message from showing up, but the success message will still disappear .

[aerni]

I don't quite understand the issue. Maybe a video would help. And a repo that reproduces the issue.

What do you mean by ... will be validated again right after submit? Fields are only validated when you submit the form.

Or do you have real-time validation turned on? If so, try disabling it. Then your fields won't be validated immediately but only when submitting the form.

[generator85]

When disabling realtime validation the issue is still there (the field is not validated in this case, but the success message disappears after a few millisecond after submit and I can see Livewire making two consecutive contact-form requests). I'm a bit hesitant to post a video since autocomplete shows my personal info, but I'll try to create a repo to reproduce this later.

[edit]I've edited my post to say autofill to avoid confusion with autocomplete[/edit]

[generator85]

I do think the issue is more related to Safari Autofill than with AlpineJS. You can try this as a test (no Alpine needed):

1. Create a form with at least one field that can be autofilled by Safari.
2. Type something in the field and look at the requests being made when you click outside the field. One Livewire request will be made.
3. No do the same, but select a value from the Safari Autofill dropdown (Don't enter it manually, the field will become yellow if you do this correctly).
4. Now two consecutive Livewire requests will be made for this one change.

[aerni]

It looks like this is an issue with Livewire, Alpine, and Safari unrelated to this addon. This addon uses basic Livewire functionality and doesn't do anything fancy. So your issue likely has to be addressed by Livewire or Alpine. There are a couple of issues on the Livewire repo that sound similar to what you are describing: https://github.com/livewire/livewire/discussions?discussions_q=is%3Aopen+safari+autofill

If you come to the conclusion, that your issue in fact is a bug of this addon, feel free to respond with your reasoning. For now, I will close this issue.