Fix Flux::attributesAfter() usages

[joshhanley]

The scenario

Currently if you have a label:class attribute on an input, like <flux:input label="Input 1" label:class="text-purple-500"/>, the classes are no longer forwarded since v2.6.0, where as it used to work.

<?php

use Livewire\Component;

new class extends Component {
    //
};

?>

<div class="mx-auto max-w-md">
    <flux:input label="Input 1" label:class="text-purple-500"/>
</div>

The problem

The issue is that in v2.6.0 we released an update to Flux::attributesAfter() that stripped the matched values from existing $attributes to ensure they weren't also output/ doubled up where they shouldn't be.

The problem with stripping comes down to how Flux::attributesAfter() is used. One scenario works fine and the other is causing the problem described above.

The working solution is when used like this:

<?php $labelAttributes = Flux::attributesAfter('label', $attributes); ?>
<flux:label :attributes="$labelAttributes" />

The broken scenario is when it is used inline like this:

<flux:label :attributes="Flux::attributesAfter('label', $attributes)" />

To understand why this is broken, we have to dive into how Blade compiles components.

When a Blade component is found, Blade compiles it down to this string:

<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'ab18b3e58a3b1bb5106ced208a8bd460::label','data' => ['attributes' => Flux::attributesAfter('label:', $attributes, ['badge' => $badge])]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('flux::label'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['attributes' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute(Flux::attributesAfter('label:', $attributes, ['badge' => $badge]))]); ?>

If you look closely, you will see that Flux::attributesAfter() is actually being called twice for the label component. This is because Blade makes use of the $attributes bag twice when rendering a component.

What this means is that the first call is removing the label attributes from the $attribute bag. And the second one inside ->withAttributes(), which is the one that actually passes the data to the component, can't actually find any label attributes in the $attributes bag. Hence why no attributes are being forwarded to the component.

The solution

The solution is to remove the inline usages of Flux::attributesAfter() and make use of a temporary variable, to ensure the attributes are pulled and collected only once and then that bag is included with the component.

I have checked Flux Pro and all components that use Flux::attributesAfter() are already using temporary variables, so there was only a couple of components that needed to be updated on this repo.

Now it's all working as expected again.

Fixes #2056

[sertxudev]

Can confirm this also happens with the profile component:

<flux:profile
    class="hidden md:flex"
    name="Sergio Peris"
    icon-trailing="chevron-down"
    avatar:badge avatar:badge:color="pink" avatar:badge:position="top right"
/>