[7.x] Fix output of component attributes #31994
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #31939
This PR fixes multiple issues with how component attributes are rendered.
$attribute
and$attributes->merge()
results in different rendered attributes for values that aretrue
or casts tofalse
. For examplemin="0"
is currently removed when using merge() (see full example below).Here is an attempt to summarise the changes. In short
$attribute
and$attribute->merge()
now have identical output and are rendered the same way as Vue.<x-input :checked="false">
,<x-input :checked="null">
,<x-input :checked="">
→<input>
Previously
<input checked="">
and<input>
<x-input :min="0">
,<x-input :min="'0'">
→<input min="0">
Previously
<input min="0">
and<input>
<x-input :checked="true">
→<input checked="checked">
Previously
<input checked>
and<input checked="checked">
This last example is handled a bit simpler than Vue. Vue differentiate boolean attributes (
checked
,disabled
,itemscope
etc) and normal attributes. This PR doesn't (but it could be added in another PR).An example where min="0" is removed when using merge()
A blade component with attributes:
<input type="number" {{ $attributes }} />
For an input with type number it's reasonable to have min="0":
This render as:
But if you used
merge()
:The attribute with value 0 is removed:
Another example with an attribute with a value
false
that is rendered differently when using with or without merge()With a component that simply prints it's attributes:
<input {{ $attributes }} />
If the component is used like this:
<x-input :disabled="false" />
We would expect the rendered template to be:
But the current implementation renders:
But if the component uses
merge()
like this:The output is what one would expect: