Files
livewire-material/resources/views/components/select.blade.php
T
Andreas Reinhold / reiniandClaude Opus 5 648a4cfe0f
tests / lint (push) Successful in 1m5s
tests / feature (8.4) (push) Successful in 1m9s
tests / feature (8.5) (push) Successful in 1m9s
tests / browser (chrome, chromium) (push) Successful in 3m19s
tests / browser (safari, webkit) (push) Successful in 5m0s
tests / browser (firefox, firefox) (push) Successful in 4m34s
Show a plain form field's errors under its name
Fields read their errors only under the wire:model name, so a Fortify
login form (name="email", no wire:model) never showed "These
credentials do not match". Without wire:model they now read the name,
turning brackets into dots.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 10:41:37 +02:00

60 lines
2.7 KiB
PHP

{{-- A select: the native `<select>`, drawn as M3's exposed dropdown menu.
Native on purpose: the keyboard, type-to-find, the screen reader and the form value are the
browser's, and `wire:model` binds to it as to any select. Where the browser has the
customizable select (`appearance: base-select`) its open list is M3's menu, under the field
and as wide (resources/css/components/menu.css); elsewhere the native list stands in. So the
options stay plain text: the native list could show nothing more. A select always shows a
value, so its label always floats.
`options` as a list of `['id' => …, 'name' => …]` (`'disabled' => true` greys one out),
`option-value` and `option-label` to read other keys, and a `placeholder` that becomes the
first option, valued `placeholder-value` (empty by default). Or pass `<option>`s in the slot.
`label`, `hint`, `icon`, `variant`, `size`. --}}
@props([
'label' => null,
'hint' => null,
'hintClass' => null,
'icon' => null,
'options' => [],
'optionValue' => 'id',
'optionLabel' => 'name',
'placeholder' => null,
'placeholderValue' => null,
'size' => 'md',
'variant' => null,
])
@php
$model = $attributes->whereStartsWith('wire:model')->first();
$id = $attributes->get('id') ?? 'field-'.substr(md5($model.'|'.$label.'|select'), 0, 12);
// A plain form's field is named, not bound: its errors are under its name (`files[]` `files`, `a[b]` `a.b`).
$errorKey = $model ?? (filled($attributes->get('name')) ? str_replace(['[]', '[', ']'], ['', '.', ''], (string) $attributes->get('name')) : null);
$messages = $errorKey !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($errorKey)) : [];
@endphp
<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$size :$variant floated :class="$attributes->get('class')">
<select
{{ $attributes->except(['class', 'id']) }}
id="{{ $id }}"
@if ($messages !== []) aria-invalid="true" @endif
@if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
class="field-control"
>
@if (filled($placeholder))
<option value="{{ $placeholderValue }}">{{ $placeholder }}</option>
@endif
@foreach ($options as $option)
<option value="{{ data_get($option, $optionValue) }}" @disabled(data_get($option, 'disabled'))>{{ data_get($option, $optionLabel) }}</option>
@endforeach
{{ $slot }}
</select>
<x-slot:trailing>
<x-livewire-material::icon name="arrow_drop_down" class="field-trailing field-arrow size-(--field-icon)" />
</x-slot:trailing>
</x-livewire-material::field>