ISSUE: Select options custom attributes

[poseso]

I'm having problems trying to add custom attributes, my select looks like this:

{{ html()->select('location_id', $business_locations, $default_location)
->class('form-select form-select-solid form-control rounded-start-0 border-start')
->attribute('data-control', 'select2')
->required() }}

which renders:

<select class="form-select form-select-solid form-control rounded-start-0 border-start" name="location_id" id="location_id"><option value="1">Skinner Simmons Tradings (LOC0001)</option>
<option value="2">Vance and Mathews Associates (LOC0002)</option>
</select>

I have an array of custom data attributes in a variable $location_attributes that I need to put on each like this:

array:2 [▼ // resources/views/backend/pos/purchase_order/create.blade.php
1 => array:6 [▼
"data-receipt_printer_type" => "browser"
"data-default_price_group" => null
"data-default_payment_accounts" => "{"cash":{"is_enabled":1,"account":null},"card":{"is_enabled":1,"account":null},"cheque":{"is_enabled":1,"account":null},"bank_transfer":{"is_enabled":1,"account ▶"
"data-default_sale_invoice_scheme_id" => null
"data-default_invoice_scheme_id" => 1
"data-default_invoice_layout_id" => 1
]
2 => array:6 [▼
"data-receipt_printer_type" => "browser"
"data-default_price_group" => null
"data-default_payment_accounts" => "{"cash":{"is_enabled":1,"account":null},"card":{"is_enabled":1,"account":null},"cheque":{"is_enabled":1,"account":null},"bank_transfer":{"is_enabled":1,"account ▶"
"data-default_sale_invoice_scheme_id" => null
"data-default_invoice_scheme_id" => 2
"data-default_invoice_layout_id" => 2
]
]

is there any additional parameters that I could use to accomplish this?

on Laravel Collective there was 5th parameter that could let set an array of options attributes like this:

Form::select("name", $options, null, [], $option_attributes);

But I haven't found a way to do it with Spatie,

Any help would be greatly appreciated!

Thanks in advanced!

[poseso]

If there is no way, just tell me so I can close this. Thanks

[danichurras]

I had the same problem and solved it like this:

<div class="row">
    <div class="col-12 form-group">
        <label for="curriculo_disciplina_id">Disciplina do currículo <span style="color: red;">*</span></label>
        {{html()->select('curriculo_disciplina_id', [], old('curriculo_disciplina_id', $aproveitamento->curriculo_disciplina_id))
            ->id('curriculo_disciplina_id')
            ->class(['form-control', 'is-invalid' => $errors->has('curriculo_disciplina_id')])
            ->required()
            ->placeholder('Selecione...')
            ->children($disciplinas, function($disciplina) {
                $aproveitada = $disciplina['desabilitada'] == 1 ? ' (Aproveitada)' : '';
                return html()->option($disciplina['nome'] . $aproveitada, $disciplina['id'])->disabled($disciplina['desabilitada'] == 1);
                })
            }}
        <x-invalid-feedback field="curriculo_disciplina_id"/>
    </div>
</div>

In this case I only needed the 'disabled' attribute, but I think you can understand the logic.

[osirion]

Did you ever come right here @poseso ? I am also coming over from Laravel Collective and am struggling with this. I tried using @danichurras solution, but am not coming right.

[osirion]

Using @danichurras as a base, this was the solution to my issue:

Controller:

        $contact_detail_types = ContactDetailType::pluck('contact_detail_type','id')->all();
        $cdt_input_masks = collect(ContactDetailType::all())
            ->mapWithKeys(function ($item) {
                return [$item->id => ['data-input-mask' => $item->input_mask]];
            })->all();

Blade:

{{
html()->select('contact_detail_type_id')
    ->children($contact_detail_types, function ($contact_detail_type, $id) use ($cdt_input_masks){
        return html()->option($contact_detail_type, $id)->attribute('data-input-mask', $cdt_input_masks[$id]['data-input-mask']);
    })
    ->class('form-control kt-select2' . ($errors->has('contact_detail_type_id') ? ' is-invalid' : '')) 
}}

of if you need it to work on an 'edit' page:

return html()->option($contact_detail_type, $id)->attribute('data-input-mask', $cdt_input_masks[$id]['data-input-mask'])->selectedIf($contact_detail->contact_detail_type_id==$id);

[poseso]

Hello @osirion,

I created a component for our issue:

@props([
    'id',
    'name',
    'options' => [],
    'dataAttributes' => [],
    'selected' => null,
])

<select
    {{ $attributes->merge(['class' => 'form-select form-control form-control-lg form-control-solid'  . ($errors->has($name) ? ' is-invalid' : ' ')]) }}
    class="{{ 'form-select form-select-solid' . ($errors->has($name) ? ' is-invalid' : '') }}"
    @isset($name)
        name="{{ $name }}"
    @endisset

    @isset($id)
        id="{{ $id }}"
    @else
        id="{{ Str::snake($name) }}"
    @endisset
>
    @isset($dataPlaceholder)
        <option></option>
    @endisset

    @foreach($options as $key => $value)
        @isset($dataAttributes[$key])
            @php
                $attribute = collect($dataAttributes[$key])->map(function ($data, $attr) {
                    return $attr . '="' . e($data) . '"';
                })->implode(' ');
            @endphp
        @endisset

        <option value="{{ $key }}" {!! isset($dataAttributes[$key]) ? $attribute : '' !!} {{ $selected == $key ? 'selected' : '' }}>{!! $value !!}</option>
    @endforeach
</select>

and I use it like this:

                                    <x-utils.dropdown name="select_location_id"
                                                      data-control="select2"
                                                      data-placeholder="{{ __('messages.please_select') }}"
                                                      :options="$business_locations"
                                                      :data-attributes="$bl_attributes"
                                                      :selected="$default_location->id"
                                                      required
                                                      autofocus>
                                    </x-utils.dropdown>
                                    ```

[bplace]

Would love to have that option, it's very tedious to set disabled attributes on options as far as I can tell

[maylat]

I resolve this issue by extend Select component.

<?php

namespace App\Blade;

use Spatie\Html\Html;

class HtmlExtended extends Html
{
    public function selectCustom($name = null, $options = [], $value = null, $optionAttributes = [])
    {
        return SelectCustom::create()
            ->attributeIf($name, 'name', $this->fieldName($name))
            ->attributeIf($name, 'id', $this->fieldName($name))
            ->options($options, $optionAttributes)
            ->value($name ? $this->old($name, $value) : $value);
    }
}

<?php

namespace App\Blade;

use Illuminate\Support\Collection;
use Spatie\Html\Elements\Option;
use Spatie\Html\Elements\Select;

class SelectCustom extends Select
{
    public function options($options, $attributes = []): self
    {
        return $this->addChildren($options, function ($text, $value) use ($attributes) {
            if (is_array($text) || $text instanceof Collection) {
                return $this->optgroup($value, $text);
            }

            $option = Option::create()
                ->value($value)
                ->text($text)
                ->selectedIf($value === $this->value);

            if (isset($attributes[$value])) {
                $option = $option->attributes($attributes[$value]);
            }

            return $option;
        });
    }
}

<?php

namespace App\Providers;

use App\Helpers\HtmlExtended;
use Illuminate\Support\ServiceProvider;
use Spatie\Html\Html;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        $this->app->singleton(Html::class, HtmlExtended::class);
    }
}

{{ html()->selectCustom('nomination_id', $nominations, null, $nominationsOptionsAttributes)