Choices item slot

[ANJANS]

maryUI version

1.35.4

daisyUI version

4.12.10

Livewire version

3.5.4

What browsers are affected?

Chrome, Microsoft Edge

What happened?

Choices does not show Item slot if used on drawer (and also modal).

https://github.com/user-attachments/assets/c288bd2f-e7ef-493d-82cc-4114ded844c3

[robsontenorio]

There is no error on console ? Are you sure that works outside the drawer?

Please , show the code of x-choices part.

[ANJANS]

There is no error on console ? Are you sure that works outside the drawer?

Please , show the code of x-choices part.

I found one problem in the my code but it didn't solve the problem. I experienced, the problem is when Choices is nested component.

https://github.com/user-attachments/assets/a12e7e3f-9d55-4c74-9a4d-f6c1e8627c9a

https://github.com/user-attachments/assets/c683d786-fd5a-4c80-ba1e-1211ec15aedd

<x-ui-choices-offline option-label="person.full_name" :label="__('Select teacher')" wire:model="teacher_id" :options="$teachers"
            option-avatar="avatar" single searchable>
            @scope('selection', $teacher)
                {{ $teacher->full_name }}
            @endscope
            <x-slot:append>
                <x-ui-button wire:click="addGroupClassTeacher" icon="o-plus" class="rounded-s-none btn-primary" />
            </x-slot:append>
        </x-ui-choices-offline>

[robsontenorio]

What do you mean with “choice is a nested component”?

[ANJANS]

What do you mean with “choice is a nested component”?

Sorry for my bad English. i use livewire Full-page components and inside this page is other livewire component where is Choice.

[ANJANS]

If refresh page is all ok. But when page is loaded as full-page there are problems.

[robsontenorio]

Could you try on latest version? 1.35.5

[ANJANS]

Could you try on latest version? 1.35.5

Almost the same. Now when choosing the first time it does not show, with the second it does, but not always. Shows the time when the page renders.

[robsontenorio]

It sounds the like the classic Livewire wire:key issue .... where you have to manage it by yourself wrapping the component with proper dynamic wire:key="...."

Because when you remove something on the list, the Choices need to be refreshed with new options, depending from your logic. So, wire:key does the job.

<livewire:my-component wire:key="an unique value dynamic generated" />

or maybe

<div>
    <div wire:key="an unique value dynamic generated">
      <x-choices  ... />
   </div>
</div>

[ANJANS]

I tested in different variants. And I realized that this problem is exactly still x-choices-offline. x-choices works correctly.