Loss of Attributes After Calling Child Component

[devajmeireles]

Laravel Version

10.34

PHP Version

8.1

Database Driver & Version

No response

Description

Scenario

We have an x-input component that can receive an icon, so this is the structure of the input component:

{{-- non-anonymous component: resources/views/components/input.blade.php --}}
<div>
    <x-icon />
</div>

The x-icon structure is:

{{-- non-anonymous component: resources/views/components/icon.blade.php --}}
<div>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
    </svg>
</div>

Problem

When the x-icon contains an attribute with the same name of propriety that will be passed to the x-input (parent component), such as an HTML type tag, the $attribute loses the property after the call of the x-icon. Below is a visual explanation, which will make anyone understand better.

Debugging

1. The x-icon class:

class Icon extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct(public ?string $type = null)
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.icon');
    }
}

2. I've inserted @dump into the x-input:

<div>
    @dump($attributes->get('type'))

    <x-icon />

    @dump($attributes->get('type'))
</div>

3. Using the component like this: <x-input type="date" />

4. The output:

The easy way to solve it is to change the name of the child component's properties, but should this reported behavior really happen?

Steps To Reproduce

Ready-to-use public repository: https://github.com/devajmeireles/bug-components

1. Install and prepare the environment
2. Authenticate to the /dashboard
3. Check the bug in the /dashboard page

[driesvints]

Heya. Your repo has everything squashed into one commit. Can you please recreate it using the command below and commit your custom changes separately. Please keep the code to a bare minimum to recreate it. I don't think you need to add any auth scaffolding for this.

laravel new bug-report --github="--public"

[devajmeireles]

Heya. Your repo has everything squashed into one commit. Can you please recreate it using the command below and commit your custom changes separately. Please keep the code to a bare minimum to recreate it. I don't think you need to add any auth scaffolding for this.

laravel new bug-report --github="--public"

Here it is, as you asked: https://github.com/devajmeireles/bug-report. The same behavior happens.

[devajmeireles]

1. The components:

• Parent:

class Input extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.input');
    }
}

<div>
    @dump($attributes->get('type'))

    <x-icon />

    @dump($attributes->get('type'))
</div>

---

• Child:

class Icon extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct(public ?string $type = null)
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.icon');
    }
}

<div>
    <svg style="color: #fff;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
    </svg>
</div>

---

2. Result:

• Using:

<x-input type="foo-bar-baz" />

• Output

[devajmeireles]

Solved at #49216