Why search input inside custom slot not working when typing , if moved out the custom slot will working

hello Why search input inside custom slot not working when typing , if moved out the custom slot will working
// index page code & app-admin.blade.php layout code below

<?php
use App\Actions\Admin\JobTitle\JobTitleIndexAaction;
use App\Models\JobTitle;
use App\Traits\HasFilter;
use App\Traits\HasPagination;
use Livewire\Attributes\Computed;
use Livewire\Component;

new class extends Component {
    use HasFilter, HasPagination;

    #[Computed]
    public function jobTitles()
    {
        return app(JobTitleIndexAaction::class)->handle(search: $this->search, sortField: $this->sortField, sortDirection: $this->sortDirection, perPage: $this->perPage);
    }
};
?>
<div>
    <x-slot name="title">@lang('app.job_titles')</x-slot>
    <x-slot name="breadcrumbs">
        <x-breadcrumbs.breadcrumb-admin-item :name="__('app.job_titles')" active />
    </x-slot>
    <x-slot name="leftSection">
        <span class="text-2xl"> @lang('app.job_titles')
        </span>
        <p class="text-1 text-gray-500 dark:text-gray-200">
            @lang('app.sub_titles_sub_title')
        </p>
    </x-slot>
    <x-slot name="rightSection">
        <x-buttons.create href="#" x-data="{}"
            x-on:click="$dispatch('open-modal', { name: 'create-job-title' })" :name="__('app.create_job_title')" />
        <x-dropdowns.per-page />

        <x-inputs.search wire.model.live="search" /> // ( this not working yet ) $search exists inside HasFilter
    </x-slot>
    <x-inputs.search wire.model.live="search" /> // ( this working 100% ) $search exists inside HasFilter

    // rest of code and tables and loops


</div>

// app-admin.blade.php code

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ App::getLocale() === 'ar' ? 'rtl' : 'ltr' }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/images/favicon-16x16.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/images/favicon-32x32.png') }}">

    <meta name="robots" content="noindex, nofollow">
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    @vite('resources/css/admin.css')
    @livewireStyles
    <title>@lang('app.dashboard') | {{ $title ?? ' Dashboard' }}</title>
</head>

<body class="bg-page-bg dark:text-gray-100">

    <div class="bg-bluex-100 grid  x-cloak grid-cols-[1fr]  lg:grid-cols-[250px_1fr] grid-rows-[60px_1fr] duration-300 ease-in-out"
        x-data="{ isCollapsed: false, isMobileSidebarOpen: true }" x-bind:class="{ 'lg:!grid-cols-[90px_1fr]  ': isCollapsed }">

        <!-- navbar start -->
        <div
            class="bg-white dark:bg-dark col-start-1 col-end-3 lg:col-start-2 lg:col-end-3 py-3 px-6 border-b border-gray-200 dark:border-black flex justify-between items-center">
            <div>
                <x-breadcrumbs.breadcrumb-admin>
                    {{ $breadcrumbs ?? '' }}
                </x-breadcrumbs.breadcrumb-admin>
            </div>
            <div>

                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="size-6 lg:hidden ltr:rotate-0 rtl:rotate-180"
                    x-on:click="isMobileSidebarOpen = true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
                </svg>
            </div>
        </div>

        <x-sidebars.sidebar-admin-mobile />
        <x-sidebars.sidebar-admin />
        <!-- content start -->
        <div class="p-3 col-start-1 col-end-3 lg:col-start-2 lg:col-end-3 row-start-2 row-end-3">
            <div class="py-4 px-6 flex flex-col gap-5 md:gap-0 md:flex-row items-center justify-between">
                <div>
                    <h1 class="font-bold text-xl">{{ $leftSection ?? 'default leftSection' }}</h1>
                </div>
                <div>
                    {{ $centerSection ?? '' }}
                </div>
                <div class="flex justify-center items-center gap-2">
                    {{ $rightSection ?? '' }}
                </div>
            </div>
            <div class="bg-white dark:bg-dark  py-6 m-6 border border-gray-200 dark:border-0 content-fixer">
                {{ $slot }}
            </div>
        </div>

        <x-footers.footer-admin />
    </div>

    @livewireScripts


    @vite('resources/js/app.js')
    @stack('js')
</body>

</html>

imranbru

1 week ago

Best Answer

Level 4

This happens because of how Livewire scopes its DOM tree. When you push the search input into <x-slot name="rightSection">, Blade extracts that code and renders it outside of your Livewire component's root <div> in the app-admin.blade.php layout. Livewire only tracks and hydrates wire:model bindings that live inside its root element (which is what gets rendered in {{ $slot }}). Because the named slot is injected elsewhere in the DOM, Livewire's JavaScript simply can't see it.

Keep the input physically inside your Livewire component's default slot, but "teleport" it visually to the header.

Add an ID to the target container in your app-admin.blade.php layout:

<div id="right-section-container" class="flex justify-center items-center gap-2">
    {{ $rightSection ?? '' }}
</div>

In your Livewire component, remove the search input from the <x-slot> and use <template x-teleport="..."> inside your main default slot:

<div>
    <x-slot name="title">...</x-slot>
    <x-slot name="breadcrumbs">...</x-slot>
    <x-slot name="rightSection">
        <x-buttons.create href="#" x-data="{}" x-on:click="$dispatch('open-modal', { name: 'create-job-title' })" :name="__('app.create_job_title')" />
        <x-dropdowns.per-page />
    </x-slot>

    <template x-teleport="#right-section-container">
        <x-inputs.search wire:model.live="search" />
    </template>

    </div>

This keeps the input inside Livewire's component state/scope while rendering it exactly where you want in the layout UI.

1 like

Respect

1 week ago

Level 3

which method is better for preformance because my app is erp system 1 - using x-teleport 2 - using $disptach event for example

// on search input 
x-on:input="$dispatch('search-input-change ',{value : $event.target.value})"
// in traits

    #[On('search-input-change')]
    public function onSearchInputChange($value)
    {
        $this->search = $value;

            $this->resetPage();
    }

Please or to participate in this conversation.