Add wire:key preventing conditional field swap

[godismyjudge95]

Ran into a bug on a project where certain fields (in my case the text area and captcha fields) would be replacing each other's html when conditions were parsed.

---

Steps to reproduce:

• Create a form with the following fields:
  • Select box with 2 options
  • Text input with a condition based on the select box above (not the default value)
  • Text area with no conditions on it
  • Captcha field
• Display the form on a page
• Change the select box from the default value to the value that will show the text input field

Result:

The captcha field disappears but the captcha itself appears in place of the text area field.

Expected:

The text input field should show and hide based on the select box value while the text area and captcha fields should remain untouched.

---

Solution:

This is a sometimes random bug with how Livewire parses differences in a loop of html items. Sometimes it cannot tell where the original html should go. The solution is to add wire:key with a unique key (I used the field handle) to the individual items (in this case the field wrappers).

I guess an argument could be made to use the field ID instead of the handle as that might be more unique? For me the handle is working fine.

[aerni]

This is gold. Thanks!