TagsInput tags show elsewhere when tagsInput hidden

[febelery]

Package

filament/forms

Package Version

v2.7.4

Laravel Version

v8.77

Livewire Version

v2.0

PHP Version

PHP 8.1

Bug description

Forms\Components\Select::make('type')
    ->options([
        'input' => 'input',
        'radio' => 'radio',
    ])
    ->default('input'),
Forms\Components\Select::make('rule')
    ->options([
        'phone' => 'phone',
        'email' => 'email',
        'url' => 'url',
    ])
    ->when(fn(callable $get) => $get('type') === 'input'),
Forms\Components\TagsInput::make('options')
    ->when(fn(callable $get) => $get('type') === 'radio')

TagsInput tags show elsewhere when tagsInput hidden

https://user-images.githubusercontent.com/52574911/147524241-0b6a1cc8-9054-4426-b114-6b5487b31048.mp4

Steps to reproduce

No response

Relevant log output

No response

[danharrin]

I've just looked into this. It's actually a Livewire bug, inside the algorithm to determine which parts of the HTML to update (DOM-diffing).

The solution to this would be to add a wire:key to every field - but this would have other side effects that we probably would not want. It would likely break other dynamic forms.

The simple solution for this is to wrap the TagsInput in a Group::make([ tags here ]). It's hacky, but it allows Livewire to mutate the HTML correctly so this doesn't happen.

[blite]

Can confirm I still see this when hiding two fields using

->hidden(fn (Closure $get) => $get('title') === null)

for me it presented as the tag input looking like it was attached to another field, seems very likely to be the same bug, and potentially upstream.

fixed by using Fieldset and calling ->hidden on it.

[danharrin]

You can use a Group instead of Fieldset if you don't want there to be any visual difference :)