Volt component not selecting disabled select option as placeholder.

On my class based Volt component, I have the select input below :

<select class="form-select" name="product_id" wire:model.live='selectedProduct' required>

    <option value="" selected disabled>Select a product</option> {{-- It's not selecting this --}}

    @foreach ($this->categories() as $categoryName => $categoryProducts)
        <option disabled>{{ $categoryName }}</option>

        @foreach ($categoryProducts as $product)
            <option value="{{ $product['id'] }}">
                - {{ $product['name'] }}
            </option>
        @endforeach

    @endforeach
</select>

In the PHP part of the component, I am assigning selectedProduct to null with this line : public $selectedProduct = null;

So I want the first option (<option value="" disabled>Select a product</option>) to be selected when the form loads for the first time. But for some reason it automatically selects the first loaded product option on the list.

$this->categories() returns an array of product categories with products in each of them. It's a visual thing to group products by category name in the select input.

I tried :

• Hard coding selected on the placeholder option.
• Changing public $selectedProduct = null; with public $selectedProduct;
• Changing wire:model.live with wire:model
• Removing category title lines (<option disabled>{{ $categoryName }}</option>) so there's only one "null" option on the list.

And it's still selecting the first non-null option. Any idea how I can fix this?