[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.
$attributeand$attributes->merge()results in different rendered attributes for values that aretrueor 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
$attributeand$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,itemscopeetc) 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():<input type="number" {{ $attributes->merge(['class' => 'm-4']) }} />The attribute with value 0 is removed:
Another example with an attribute with a value
falsethat 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:<input {{ $attributes->merge() }} />The output is what one would expect: