TagsInput component doesn't propagate $isDisabled changes to the delete [x] tag button

[zabaala]

Package

filament/forms

Package Version

3.0.48

Laravel Version

10.20.0

Livewire Version

No response

PHP Version

8.1.21

Problem description

When trying to use the value of a particular field, such as a Toggle, to enable/disable a TagsInput component, when disabled, the state change doesn't affect the Delete button. This means that when it's disabled, it's still possible to delete existing tags in the field.

Considering the following code:

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Section::make()->schema([
                Toggle::make('disable_tags_toggle'),
                TagsInput::make('tags')->disabled(static fn (Get $get) => $get('disable_tags_toggle')),
            ]),
        ])
    ;
}

Digging deeper, I noticed that the value of $isDisabled for the following code snippet is always the initially defined one.

{{-- tags--input.blade.php --}}

@if (! $isDisabled)
    <x-slot
        name="deleteButton"
        x-on:click="deleteTag(tag)"
    ></x-slot>
@endif

Expected behavior

When the element is disabled, it shouldn't be possible to remove items from the tag list.

Steps to reproduce

1. Add tags to the input.
2. Disable it using the toggle.

In this way, you will see elements in the disabled list that can be removed.

Reproduction repository

https://github.com/zabaala/filament-tags-input-bug

Relevant log output

No response

[zabaala]

While testing with multiple select, I encountered the same issue, but with a slight difference. In the disabled multiple select, it's still possible to interact with available options.

Listing options to disabled select:

Added options to disabled select:

This case was pushed too to Reproduction repository.

[zepfietje]

Duplicate of https://github.com/filamentphp/filament/issues/3068 (and many other same issues).

[zepfietje]

Sorry, reopening. Your comment confused me, @zabaala, as it's about a different component. The issue in your comment is what I referred to and is a limitation of Choices.js we can't fix.

Tracking the tags input issue here.

[danharrin]

Fixed by #10052.