Select placeholder

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to `laravel-form-components` will be documented in this file
 
+## 3.2.0 - 2021-11-01
+
+- Support for `select` placeholder
+
 ## 3.1.0 - 2021-11-01
 
 - Support for Date Casting

README.md

@@ -318,6 +318,23 @@ If you want a select element where multiple options can be selected, add the `mu
 <x-form-select name="country_code[]" :options="$countries" multiple :default="['be', 'nl']" />
 ```
 
+You may add a `placeholder` attribute to the select element. This will prepend a disabled option.
+
+This feature was added in v3.2.0. If you're upgrading from a previous version *and* you published the Blade views, you should republish them *or* update them manually.
+
+```blade
+<x-form-select name="country_code" placeholder="Choose..." />
+```
+
+Rendered HTML:
+
+```html
+<select>
+ <option value="" disabled>Choose...</option>
+ <!-- other options... -->
+</select>
+```
+
 #### Using Eloquent relationships
 
 This package has built-in support for `BelongsToMany`, `MorphMany`, and `MorphToMany` relationships. To utilize this feature, you must add both the `multiple` and `many-relation` attribute to the select element.

resources/views/bootstrap-4/form-select.blade.php

@@ -12,11 +12,22 @@
  multiple
  @endif
 
+ @if($placeholder)
+ placeholder="{{ $placeholder }}"
+ @endif
+
  @if($label && !$attributes->get('id'))
  id="{{ $id() }}"
  @endif
 
  {!! $attributes->merge(['class' => 'form-control ' . ($hasError($name) ? 'is-invalid' : '')]) !!}>
+
+ @if($placeholder)
+ <option value="" disabled @if($nothingSelected()) selected="selected" @endif>
+ {{ $placeholder }}
+ </option>
+ @endif
+
  @forelse($options as $key => $option)
  <option value="{{ $key }}" @if($isSelected($key)) selected="selected" @endif>
  {{ $option }}

resources/views/bootstrap-5/form-select.blade.php

@@ -15,12 +15,23 @@
  multiple
  @endif
 
+ @if($placeholder)
+ placeholder="{{ $placeholder }}"
+ @endif
+
  @if($label && !$attributes->get('id'))
  id="{{ $id() }}"
  @endif
 
  {!! $attributes->merge(['class' => 'form-select' . ($hasError($name) ? ' is-invalid' : '')]) !!}
  >
+
+ @if($placeholder)
+ <option value="" disabled @if($nothingSelected()) selected="selected" @endif>
+ {{ $placeholder }}
+ </option>
+ @endif
+
  @forelse($options as $key => $option)
  <option value="{{ $key }}" @if($isSelected($key)) selected="selected" @endif>
  {{ $option }}

resources/views/tailwind-2/form-select.blade.php

@@ -13,9 +13,20 @@
  multiple
  @endif
 
+ @if($placeholder)
+ placeholder="{{ $placeholder }}"
+ @endif
+
  {!! $attributes->merge([
  'class' => ($label ? 'mt-1' : '') . ' block w-full'
  ]) !!}>
+
+ @if($placeholder)
+ <option value="" disabled @if($nothingSelected()) selected="selected" @endif>
+ {{ $placeholder }}
+ </option>
+ @endif
+
  @forelse($options as $key => $option)
  <option value="{{ $key }}" @if($isSelected($key)) selected="selected" @endif>
  {{ $option }}

resources/views/tailwind/form-select.blade.php

@@ -13,9 +13,20 @@
  multiple
  @endif
 
+ @if($placeholder)
+ placeholder="{{ $placeholder }}"
+ @endif
+
  {!! $attributes->merge([
  'class' => ($label ? 'mt-1' : '') . ' block w-full ' . ($multiple ? 'form-multiselect' : 'form-select')
  ]) !!}>
+
+ @if($placeholder)
+ <option value="" disabled @if($nothingSelected()) selected="selected" @endif>
+ {{ $placeholder }}
+ </option>
+ @endif
+
  @forelse($options as $key => $option)
  <option value="{{ $key }}" @if($isSelected($key)) selected="selected" @endif>
  {{ $option }}

src/Components/FormSelect.php

@@ -17,6 +17,7 @@ class FormSelect extends Component
  public $selectedKey;
  public bool $multiple;
  public bool $floating;
+ public string $placeholder;
 
  /**
  * Create a new component instance.
@@ -32,12 +33,14 @@ public function __construct(
  bool $multiple = false,
  bool $showErrors = true,
  bool $manyRelation = false,
- bool $floating = false
+ bool $floating = false,
+ string $placeholder = ''
  ) {
  $this->name = $name;
  $this->label = $label;
  $this->options = $options;
  $this->manyRelation = $manyRelation;
+ $this->placeholder = $placeholder;
 
  if ($this->isNotWired()) {
  $inputName = Str::before($name, '[]');
@@ -64,4 +67,13 @@ public function isSelected($key): bool
 
  return in_array($key, Arr::wrap($this->selectedKey));
  }
+
+ public function nothingSelected(): bool
+ {
+ if ($this->isWired()) {
+ return false;
+ }
+
+ return is_array($this->selectedKey) ? empty($this->selectedKey) : is_null($this->selectedKey);
+ }
 }

tests/Feature/SelectSlotTest.php → tests/Feature/SelectTest.php

@@ -4,7 +4,7 @@
 
 use ProtoneMedia\LaravelFormComponents\Tests\TestCase;
 
-class SelectSlotTest extends TestCase
+class SelectTest extends TestCase
 {
  /** @test */
  public function it_shows_the_slot_if_the_options_are_empty()
@@ -16,4 +16,15 @@ public function it_shows_the_slot_if_the_options_are_empty()
  ->seeElement('option[value="b"]')
  ->seeElement('option[value="c"]');
  }
+
+ /** @test */
+ public function it_can_render_a_placeholder()
+ {
+ $this->registerTestRoute('select-placeholder');
+
+ $this->visit('/select-placeholder')
+ ->seeElement('option[value=""][selected="selected"]')
+ ->seeElement('option[value="a"]')
+ ->seeElement('option[value="b"]');
+ }
 }

tests/Feature/views/select-placeholder.blade.php

@@ -0,0 +1,5 @@
+<x-form>
+ <x-form-select name="select" placeholder="Choose..." :options="['a' => 'a', 'b' => 'b']"></x-form-select>
+
+ <x-form-submit />
+</x-form>