References to child component lost when livewire/update called

[dfrl-dev]

maryUI version

1.35

daisyUI version

4.12.10

Livewire version

3.5

What browsers are affected?

Firefox, Chrome

What happened?

When using a table flagged expandable, reference to custom components in the expansion slot are lost when an update call is fired. The lost components are in the expansion scope below.

I get an error that has been reported here before, the snapshot reference errors, but haven't found any of the proposed solutions work.

I've tried both the wire:key and :key approaches to keying the livewire component without success.

That said, I did manage to get it working by removing the wire key from the MaryUI Table.php expansion slot here:

                                <!-- EXPANSION SLOT -->
                                @if($expandable)
                                    <tr wire:key="{{ $uuid }}-{{ $k }}--expand" class="!bg-inherit" :class="isExpanded({{ $getKeyValue($row, 'expandableKey') }}) || 'hidden'">
                                        <td :colspan="colspanSize">
                                            {{ $expansion($row) }}
                                        </td>
                                    </tr>
                                @endif

I'm concerned that might have other consequences down the road. Any suggestions?

        <x-table
            :headers="$headers"
            :rows="$localizationItems"
            striped
            wire:model="expanded"  
            expandable   
            expandable-key="string_id"  
            >

            @scope('cell_uploaded_to_crowdin', $localizationItem)
                <input type="checkbox"
                    wire:change="updateReadyState({{ $localizationItem }}, 'uploaded_to_crowdin', $event.target.checked)"
                    @if((bool)$localizationItem->uploaded_to_crowdin) checked @endif
                    wire:key="crowdin-ready-{{$localizationItem->string_id}}"
                    class="checkbox checkbox-primary pointer-events-none opacity-100"
                />
            @endscope

            @scope('cell_flagged_for_upload', $localizationItem)
                <input type="checkbox"  
                    wire:model="selected.{{ $localizationItem->string_id }}"
                    wire:key="crowdin-flag-{{$localizationItem->string_id}}"
                    wire:change='testSelect'
                />

            @endscope

            @scope('cell_translation_progress', $localizationItem)
                {{number_format($localizationItem->translationProgress(), 1) }}%
            @endscope   

            @scope('expansion', $localizationItem)
                <livewire:localization-form-item :localizationItem="$localizationItem" 
                wire:key="'loc-item-' . {{$localizationItem->string_id}}"
                />
            @endscope
        </x-table>   

[robsontenorio]

Have you tried this ? But , for expansion instead of actions.

https://github.com/robsontenorio/mary/issues/663#issuecomment-2414837626

[dfrl-dev]

Something like this?

            @scope('expansion', $localizationItem)
                <livewire:localization-form-item.expansion :localizationItem="$localizationItem" 
                wire:key="'loc-item-' . {{$localizationItem->string_id}}"
                />
            @endscope

That throws an error that it can't find the component localization-form-item.expansion. I think I'm misunderstanding something with that solution, though. Forgive me, I'm relatively new to this stack.

[dfrl-dev]

Experimenting again with all the solutions in the closed issues led nowhere, unfortunately. The only functional solution so far is to remove the wire-key from the expansion row. I've noticed no negative consequences yet, but I'm open to other suggestions.

FWIW it's worth the child component has no wire:keys anywhere, either. There must be a quirk (or intentional implementation) where the nested keys don't work?