Extra attributes are added to html element

[vascocarreira]

Laravel Version

11.22

PHP Version

8.3.11

Database Driver & Version

No response

Description

All attributes are added when attributes merge is invoked

Steps To Reproduce

According to Laravel's documentation in https://laravel.com/docs/11.x/blade#default-merged-attributes, if the attributes in a blade component are set like this:
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>

And then we invoke the component like this:
<x-alert type="error" :message="$message" class="mb-4"/>

The end result should be this:
<div class="alert alert-error mb-4">
<!-- Contents of the $message variable -->
</div>

But... That's not what I'm getting.
All attributes passed in the blade component are being added to the html element where I'm calling the attributes merge.
Please, check the following screenshot.

Am I doing something wrong or missing something?
Or is this a real issue?

Thanks in advance.
Regards.

[calebdw]

This is the expected behaviour

[vascocarreira]

@calebdw , if this is the expected behavior, I kindly ask you to update the documentation since it does not reflect the true final rendered HTML of the component.

Regarding this issue, is there a more efficient way to merge just the classes than the following one?
class="alert alert-{{ $type }} {{ $class ?? '' }}"

[calebdw]

I kindly ask you to update the documentation since it does not reflect the true final rendered HTML of the component.

You can submit a PR if you like, but perhaps there were no other attributes in the AttributeBag?

Regarding this issue, is there a more efficient way to merge just the classes than the following one?

You can use the @class directive

[claspina]

This is the expected behaviour

According to documentation, this is not the expected behavior

[calebdw]

@claspina, your red box / arrow has nothing to do with the question at hand.

Dumping the AttributeBag in a blade template <div {{ $attributes }}> dumps all the attributes in the bag onto the element (including when using the merge: <div {{ $attributes->merge(...) }}>).

[calebdw]

I believe using @props(['message']) will take the $message out of the AttributeBag:

@props(['message'])

<div {{ $attributes }}>
    {{ $message }}
</div>

[vascocarreira]

@calebdw , I think you did not understand what I asked.

I have this component:
<div class="alert alert-{{ $type }}" role="alert">

But I want to be able to add more classes if needed like, for example, mb-4.
<x-alert class="mb-4"/>

So, in order to be able to add that extra class, I'm doing it like this in the component:
<div class="alert alert-{{ $type }} {{ $class ?? '' }}" role="alert">

Is there a more efficient way to do this (merging classes)?
The @class directive does not seem to do the trick.

--- Another question ---
To check for directives like "required" inside a blade component, I'm doing it like this.
<input ... @isset($required) required @endisset >

Is there a better way?

[calebdw]

But I want to be able to add more classes if needed like, for example, mb-4.

There's nothing wrong with what you originally had:

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>

To check for directives like "required" inside a blade component, I'm doing it like this.

Use @required($required), or if the element you want it on is the same as the one you dumped the AttributeBag onto then you actually don't need to do anything

[vascocarreira]

There's nothing wrong with what you originally had:

Yes, but in order to not add the other attributes to the html component, I have to declare them as props in the component.
I get it, now.

I think this detail should be in the docs example, like so:

@props([
    'message',
    'type'
])

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

Thank you very much for clearing up my doubts.
I'm closing this ticket now.
Regards.

[driesvints]

Thanks for helping out here @calebdw