wip

Author: rawilk

dist/form-components.js

@@ -1 +1 @@
-{"/form-components.js":"/form-components.js?id=463675fb6a026cc94be2"}
+{"/form-components.js":"/form-components.js?id=e9ea2b6e046331699d23"}

dist/form-components.js.map

@@ -47,7 +47,13 @@ export default function customSelect(state) {
 
             this.updateDisplay(this.value);
 
-            $watch('value', value => this.updateDisplay(value));
+            $watch('value', value => {
+                this.updateDisplay(value);
+
+                if (this.filterable) {
+                    this.refreshOptionsIfNeeded();
+                }
+            });
             $watch('query', value => this.filter(value));
             $watch('wireFilter', () => {
                 this.$nextTick(() => {
@@ -342,12 +348,27 @@ export default function customSelect(state) {
             this.open = ! this.open;
 
             if (this.open) {
-                this.$nextTick(() => this.positionMenu());
+                this.$nextTick(() => {
+                    this.positionMenu();
+                    this.refreshOptionsIfNeeded();
+                });
+
                 this.highlightSelectedOption();
                 this[this.filterable ? 'focusFilter' : 'focusMenu']();
             }
         },
 
+        // Note: this seems like a dirty hack for when wire:model is used on the select
+        // and probably should be revisited in the future to see how we can
+        // prevent each option from losing its id and data-index attributes.
+        refreshOptionsIfNeeded() {
+            const children = this.optionChildren();
+
+            if (! children.length || ! children[0].getAttribute('id')) {
+                this.options = this.parseOptions();
+            }
+        },
+
         positionMenu() {
             this.$refs.container.classList.remove('custom-menu-top');
 

dist/manifest.json

@@ -1,4 +1,4 @@
-<li @unless ($disabled)
+<li @unless ($disabled || $isGroup)
         x-on:mouseenter="onMouseEnter({{ $optionValue() }})"
         x-on:mouseleave="selected = null; currentIndex = -1"
         x-on:click="choose({{ $optionValue() }})"

resources/js/components/custom-select.js

@@ -1,30 +1,2 @@
-<div class="form-text-container {{ $maxWidth }}">
-    @include('form-components::partials.leading-addons')
-
-    <select name="{{ $name }}"
-            @if ($id) id="{{ $id }}" @endif
-            @if ($multiple) multiple @endif
-
-            @if ($hasErrorsAndShow($name))
-                aria-invalid="true"
-
-                @if (! $attributes->offsetExists('aria-describedby'))
-                    aria-describedby="{{ $id }}-error"
-                @endif
-            @endif
-
-        {{ $attributes->merge(['class' => $inputClass()]) }}
-    >
-        {{ $slot }}
-
-        @foreach (app('fc-timezone')->only($only)->all() as $region => $regionTimezones)
-            <optgroup label="{{ $region }}">
-                @foreach ($regionTimezones as $key => $display)
-                    <option value="{{ $key }}"@if ($isSelected($key)) selected @endif>{{ $display }}</option>
-                @endforeach
-            </optgroup>
-        @endforeach
-    </select>
-
-    @include('form-components::partials.trailing-addons')
-</div>
+@includeWhen(! $useCustomSelect, 'form-components::partials.timezone-select-native')
+@includeWhen($useCustomSelect, 'form-components::partials.timezone-select-custom')

resources/views/components/inputs/custom-select-option.blade.php

@@ -0,0 +1,11 @@
+<x-custom-select :filterable="$filterable" :optional="$optional" :placeholder="$placeholder" :multiple="$multiple"  {{ $attributes }}>
+    {{ $slot }}
+
+    @foreach (app('fc-timezone')->only($only)->all() as $region => $regionTimezones)
+        <x-custom-select-option is-group>{{ $region }}</x-custom-select-option>
+
+        @foreach ($regionTimezones as $key => $display)
+            <x-custom-select-option wire:key="tz-{{ $key }}" :option="['value' => $key, 'text' => $display]" />
+        @endforeach
+    @endforeach
+</x-custom-select>