Labels remain on textarea fields when using them in conditional mode

[MacTwister]

Hi,

Having an issue with the DOM diffing, ghost fields still showing when using conditional fields.

When having a radio button, which shows/hides other fields depending on the selected option, the toggled field labels say when switching options.

Made a simple example, using this blueprint below. When toggling between the two options in the_type field, you end up getting left over labels from the field that got hidden (though the textarea got removed). This does not happen if using radio fields instead of textarea fields for the conditional fields.

Hope I explained the issue well. I tried to narrow down when the issue happens, but have not figured out why yet. Was wondering if anyone might have more insight as to why this happens. Thank you.

sections:
  main:
    display: Main
    fields:
      -
        handle: the_type
        field:
          options:
            one: One
            two: two
          inline: false
          cast_booleans: false
          display: 'The type'
          type: radio
          icon: radio
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: false
      -
        handle: textarea_one
        field:
          antlers: false
          display: 'Textarea One'
          type: textarea
          icon: textarea
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: false
          if:
            the_type: 'equals one'
      -
        handle: textarea_two
        field:
          antlers: false
          display: 'Textarea two'
          type: textarea
          icon: textarea
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: false
          if:
            the_type: 'equals two'

[aerni]

I can't reproduce this issue. What addon version are you on? There has been a fix in v6.3.0 for this exact issue. But you'll need to update the views manually.

[MacTwister]

Thank you for having alook. That is strange, yes I should have specified I am using the latest, v7+ (with commit 470c9776f22a62a999a5922b282e5e8c28d689ea). I reviewed the 6.3 update, so also thought with the wire:key everything should be working.

I just tried a fresh install of Statamic with this plugin to try to isolate the issue, which still happens. I am perplexed.

1. composer create-project --prefer-dist statamic/statamic test-statamic-plugin
2. composer require aerni/livewire-forms
3. php please livewire-forms:setup & add livewire tags to layout file.
4. Created form blueprint example like code above.

I am still getting ghost fields, example how it looks in the screenshot:

[MacTwister]

hi @aerni I found a workaround, for the issue I am experiencing. Maybe that gives a clue, although still strange you can not reproduce this.

If I edit the textarea field view template, textarea.blade.php#16 adding a post-fix id tag which makes it different to the parent wire:id ID then things work nicely (like how radio fields are post-fixed). Maybe Livewire gets confused when finding two html tags with the same ID during DOM-diffing?

ie:

- <label for="{{ $field->id }}" class="sr-only">{{ $field->label }}</label>
+ <label for="{{ $field->id }}.textarea" class="sr-only">{{ $field->label }}</label>

<textarea
-        id="{{ $field->id }}"
+        id="{{ $field->id }}.textarea"

[aerni]

Thanks for digging into this. I was able to reproduce it now. I think you're right that Livewire is getting confused when encountering the same ID. To solve the problem, you can simply prefix the wire key in field.blade.php like wire:key="wire_{{ $field->id }}"