Skip to content

Conversation

@perifer
Copy link
Contributor

@perifer perifer commented Mar 16, 2020

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 are true or casts to false. For example min="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":

<x-number min="0" max="10" class="p-4" />

This render as:

<input type="number" min="0" max="10" class="p-4" />

But if you used merge():

<input type="number" {{ $attributes->merge(['class' => 'm-4']) }} />

The attribute with value 0 is removed:

<input type="number" max="10" class="p-4 m-4" />

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:

<input />

But the current implementation renders:

<input disabled="" />

But if the component uses merge() like this:

<input {{ $attributes->merge() }} />

The output is what one would expect:

<input />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Component attributes with boolean values are rendered differently when merge() is used

2 participants