Skip to content

Select, Blaze folding #2458

@Epitaffio

Description

@Epitaffio

Flux version

2.12.2

Livewire version

4.2.0

Tailwind version

4.1.18

Browser and Operating System

Everywhere

What is the problem?

When using Blaze and passing null/false values to flux:select via PHP variables (e.g. :label="$label" where $label is null), the with-field.blade.php wrapper always renders the flux:field, flux:label, and flux:error structure, even when these attributes should be absent. This causes visual artifacts like unwanted red borders (invalid), empty labels, and broken layouts.

The same attributes work correctly when passed as PHP literals (:label="null", :invalid="false").

For a workaraound I copied the index.blade.php for the select component inside my view folder and modified it like this:

{{-- resources/views/flux/select/index.blade.php --}}
@blaze(fold: true, unsafe: ['label', 'description', 'description:trailing', 'invalid', 'badge', 'name'])

@props([
    'variant' => 'default',
])

<flux:with-field :$attributes>
    <flux:delegate-component :component="'select.variants.' . $variant">{{ $slot }}</flux:delegate-component>
</flux:with-field>

I think that any other component that forward attributes to flux:with-field is affected.

Code snippets to replicate the problem

In a random livewire component:

@php
    $testLabel = null;
    $testInvalid = false;
    $testDescription = null;
@endphp

{{-- Works: literals --}}
<flux:select
    variant="listbox"
    clearable
    :label="null"
    :invalid="false"
    :description:trailing="null"
    placeholder="A: Literals"
>
    <flux:select.option>Option 1</flux:select.option>
    <flux:select.option>Option 2</flux:select.option>
</flux:select>

{{-- Broken: variables with the same values --}}
<flux:select
    variant="listbox"
    clearable
    :label="$testLabel"
    :invalid="$testInvalid"
    :description:trailing="$testDescription"
    :placeholder="$testPlaceholder"
>
    <flux:select.option>Option 1</flux:select.option>
    <flux:select.option>Option 2</flux:select.option>
</flux:select>

Screenshots/ screen recordings of the problem

Image Image

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be closed if I haven't met the criteria above.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions