Div inside template causing mixed positions and duplication.

[natecorkish]

• Laravel Version: 8.69.0
• PHP Version: 8.1.0
• Database Driver & Version: N/A

Description:

I'm not too sure how to explain this, and I am not sure whether it's a Laravel Templating issue, a Livewire issue, or an Alpine issue, but I'll still post the issue here just in case.

I have a tabs template, that shows divs whether it is selected, which works fine, but when I validate a form, and the following code runs:

@if($errors->any())
    <div class="bg-danger p-3 mb-4 text-ternary-opposite-primary rounded">
        <p class="text-sm font-bold">{{ $errors->first() }}</p>
    </div>
@endif

The outer div, disappears, the <p> moves in to another div, and the divs get their positions mixed up. If I change the code about to a span, rather than I div, it works as expected, but when I keep the div, it acts rather oddly.

Before validation:

After Validation:

My templating is as follows:

Modal component:

<div @keyup.escape.window="open = false"
    x-show="open"
    x-cloak
    class="absolute top-0 z-50 inset-0 overflow-y-auto"
>
    <div class="flex items-start justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">

        <div
            x-show="open"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-70"
            x-transition:leave="ease-in duration-300"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="fixed inset-0 bg-secondary opacity-70 transition-opacity"
            aria-hidden="true"
            @click="open = false"></div>

        <!-- This element is to trick the browser into centering the modal contents. -->
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div x-show="open"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
            x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            class="inline-block align-bottom bg-primary rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl w-full">

            <!--
             ! ------------------------------------------------------------
             ! Header
             ! ------------------------------------------------------------
             !-->
            <div class="bg-tertiary px-4 py-6 flex flex-col">
                <span class="font-bold text-ternary-opposite">
                    {{ $title ?? '' }}
                </span>
                <span class="mt-px font-bold text-sm text-ternary-opposite">
                    {{ $description ?? ''}}
                </span>
            </div>

            <!--
             ! ------------------------------------------------------------
             ! Body
             ! ------------------------------------------------------------
             !-->
            <div class="bg-primary">
                {{ $slot }}
            </div>

            <!--
             ! ------------------------------------------------------------
             ! Footer
             ! ------------------------------------------------------------
             !-->
            <div class="bg-tertiary px-4 py-3 sm:px-6 sm:flex justify-end gap-2">
                <x-core::forms.button color="danger" class="text-ternary-opposite-primary" @click="open = false">
                    {{ __('Cancel') }}
                </x-core::forms.button>
                {{ $footer ?? '' }}
            </div>
        </div>
    </div>
</div>

Tab Template:

<div x-data="{ tabs: {{ json_encode($tabs) }}, selected: null }" x-init="selected = tabs[0].id">
    <div class="border-b border-secondary w-full">
        <nav class="mb-px px-4 flex-1 flex flex-row overflow-y-scroll no-scrollbar gap-6 mr-5 md:mr-0">

            <template x-for="tab in tabs">
                <span @click="selected = tab.id" x-text="tab.title"
                    class="whitespace-nowrap hover:text-ternary hover:border-tertiary cursor-pointer py-4 text-center border-b-2 font-medium text-sm text-ternary"
                    :class="{ 'border-tertiary text-ternary': tab.id == selected, 'border-secondary': tab.id !== selected }"
                >
                </span>
            </template>
        </nav>
    </div>

    {{ $slot }}
</div>

Then the simple create page where it happens:

<div x-data="{ open: @entangle('open') }">
    <x-core::modal.modal
        :title="__('Create Contact')"
        :description="__('Describe the contact in as much detail')"
    >

        <!--
         ! ------------------------------------------------------------
         ! Tabs and forms
         ! ------------------------------------------------------------
         !-->
        <x-core::tabs.tabs :tabs="[
            ['id' => 'general', 'title' => 'General'],
            ['id' => 'description', 'title' => 'Description'],
            ['id' => 'shipping', 'title' => 'Shipping'],
            ['id' => 'billing', 'title' => 'Billing'],
        ]">
            <div class="px-4 py-6">
                @if($errors->any())
                    <div class="bg-danger p-3 mb-4 text-ternary-opposite-primary rounded">
                        <p class="text-sm font-bold">{{ $errors->first() }}</p>
                    </div>
                @endif
                <div x-show="selected == 'general'">
                    @include('contacts::components.forms._general')
                </div>
                <div x-show="selected == 'description'">
                    @include('contacts::components.forms._description')
                </div>
                <div x-show="selected == 'shipping'">
                    @include('core::components.partials.address')
                </div>
                <div x-show="selected == 'billing'">
                    @include('core::components.partials.address')
                </div>
            </div>
        </x-core::tabs.tabs>

        <!--
         ! ------------------------------------------------------------
         ! Modal footer
         ! ------------------------------------------------------------
         !-->
        <x-slot name="footer">
            <x-core::forms.button wire:click.prevent="submit">
                {{ __('Create Contact') }}
            </x-core::forms.button>
        </x-slot>

    </x-core::modal.modal>
</div>

The structure is what I want above, but it ends up like the following after validation:

<div x-show="selected == 'general'">
     <p class="text-sm font-bold">{{ $errors->first() }}</p>
</div>
<div x-show="selected == 'description'">
    @include('contacts::components.forms._general')
</div>
<div x-show="selected == 'description'">
    @include('contacts::components.forms._description')
</div>

As you can see, the p outer div dissapeared, and it moved inside my general div, and my description div was duplicated and the general div went inside that... Odd I know.

Steps To Reproduce:

I can supply a private repo to anyone who needs.

I have also posted this on Laravel's repo because I am not sure who the issue belongs to . laravel/framework#39468