Select placeholder (#68)

Author: pascalbaljet

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 renamed to 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>