$attributes passed to blade components in other blade components

[bjhijmans]

I recently noticed behavior with Laravel's blade components that I found very unintuitive. If I'm rendering a component inside another component, properties passed to the parent component are automatically passed to the child component.

Here is an example of what is happening.

top-level blade:

<x-confirmation-form id="confirmation-form"/>

The confirmation form class has no constructor arguments.

confirmation-form:

<form {{ $attributes }} method="post" action="{{ route('confirm') }}">
    <x-form.input name="password"/>
</form>

Input component:

class Input extends Component
{
    __construct(
        public string $name,
        public ?string $id,
    ) {
        $this->id ??= Str::kebab($name);
    }
}

and blade:

<input name="{{ $name }}" id="{{ $id }}" {{ $attributes }}/>

What I expected the rendered html to look like:

<input name="password" id="password"/>

But what I got instead was this:

<input name="password" id="confirmation-form"/>

What happens is that any component with named properties gets them filled from $attributes if it exists. So when we use a component inside a component, it takes the id from the ComponentAttributeBag $attributes and passes it as a parameter to the Input class. This behavior isn't documented anywhere.

This is the code from CompilesComponents that does it:

    public static function compileClassComponentOpening(string $component, string $alias, string $data, string $hash)
    {
        return implode("\n", [
            '<?php if (isset($component)) { $__componentOriginal'.$hash.' = $component; } ?>',
            '<?php if (isset($attributes)) { $__attributesOriginal'.$hash.' = $attributes; } ?>',
            '<?php $component = '.$component.'::resolve('.($data ?: '[]').' + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>', // it's added here
            '<?php $component->withName('.$alias.'); ?>',
            '<?php if ($component->shouldRender()): ?>',
            '<?php $__env->startComponent($component->resolveView(), $component->data()); ?>',
        ]);
    }

I think it makes no sense that it works this way, but it looks like it was done on purpose and isn't a bug? Does this make sense to anyone?

[hctorres02]

I had the same problem too.
I thought it was because of $attributes->merge(), but it wasn't.

In my case, I have the <x-textarea /> component, which has the <x-file /> field. Wrapping them all up, I have the <x-form /> component.

<!-- form -->
<x-form>
 <x-file name="file_a" />
 <x-textarea name="textarea" is-markdown />
</x-form>


<!-- textarea -->
@props(['isMarkdown' => false])

<fieldset>
 @if ($isMarkdown)
  <x-file name="attachments" multiple />
 @endif

 <textarea></textarea>
</fieldset>

For the reasons you mentioned, the properties of the first input are also assigned to the second input.