Fix button display errors when passing values in manually to custom-select - #34

Author: rawilk

dist/form-components.js

@@ -1,3 +1,3 @@
 {
-    "/form-components.js": "/form-components.js?id=8a17570b1e33ac3125b9"
+    "/form-components.js": "/form-components.js?id=2509d89034e6f7c041d5"
 }

dist/mix-manifest.json

@@ -13,7 +13,7 @@ import { isArray } from '../util/inspect';
 
 let createPopper;
 
-export default (config) => ({
+export default config => ({
     focusedOptionIndex: null,
     filterable: false,
     data: [],
@@ -33,11 +33,17 @@ export default (config) => ({
     labelField: 'label', // used for an "optgroup"'s label
     optionsField: 'options', // used when creating "optgroups"
     popper: null,
+    _wire: null, // for when in a livewire component
     ...config,
 
     get buttonDisplay() {
         if (this.multiple) {
-            let optionDisplay = this.optionDisplay(this.value[0]);
+            let optionDisplay;
+            try {
+                optionDisplay = this.optionDisplay(this.value[0]);
+            } catch (e) {
+                optionDisplay = '';
+            }
 
             if (this.value.length > 1) {
                 optionDisplay += ` <span class="custom-select__select-count">+ ${this.value.length - 1}</span>`;
@@ -46,7 +52,11 @@ export default (config) => ({
             return optionDisplay;
         }
 
-        return this.optionDisplay(this.value);
+        try {
+            return this.optionDisplay(this.value);
+        } catch (e) {
+            return '';
+        }
     },
 
     get fieldNames() {
@@ -153,10 +163,7 @@ export default (config) => ({
         return this.value === value;
     },
 
-    /*
-     * Calling initialize now so Alpine doesn't call the function twice.
-     */
-    initialize($wire = null, $dispatch = null) {
+    init() {
         createPopper = window.Popper ? window.Popper.createPopper : window.createPopper;
 
         if (typeof createPopper !== 'function') {
@@ -181,7 +188,7 @@ export default (config) => ({
         }
 
         this.$watch('value', value => {
-            $dispatch && $dispatch('custom-select-value-changed', { id: this.selectId, value });
+            this.$dispatch('custom-select-value-changed', { id: this.selectId, value });
         });
 
         // Allow local filtering if user has not specified wire:filter on the custom select component.
@@ -192,8 +199,8 @@ export default (config) => ({
 
             // If the user specifies a "wire:filter" method, attempt to call that method,
             // otherwise just perform local search.
-            if (this.wireFilter && $wire) {
-                $wire[this.wireFilter](value)
+            if (this.wireFilter && this._wire) {
+                this._wire[this.wireFilter](value)
                     .then(data => {
                         this.data = normalizeOptions(data, this.fieldNames);
                         this.options = this.data;
@@ -212,20 +219,20 @@ export default (config) => ({
                 .filter(o => ! this.isOptgroup(o) && (String(o.value).toLowerCase().includes(lowerCasedSearch) || o.text.toLowerCase().includes(lowerCasedSearch)));
         });
 
-        if ($wire) {
+        if (this._wire) {
             // Wire listeners are useful for selects whose options depend on other selects. On the livewire component,
             // user can emit an event with the options that should be shown in the dependant select based on some
             // criteria.
             this.wireListeners.forEach(listener => {
-                $wire.on(listener, data => {
+                this._wire.on(listener, data => {
                     this.data = normalizeOptions(data, this.fieldNames);
                     this.options = this.data;
                 });
             });
         }
 
         // Emit our value changed event right away for any listeners...
-        $dispatch && $dispatch('custom-select-value-changed', { id: this.selectId, value: this.value });
+        this.$dispatch('custom-select-value-changed', { id: this.selectId, value: this.value });
     },
 
     onMouseover(option, index) {
@@ -311,7 +318,8 @@ export default (config) => ({
 
         let option = this.options.find(o => o.value === value);
 
-        if (! option && this.multiple && this.selectedOption.length > 0) {
+        // First time this runs, selectedOption may be null, maybe a bug?
+        if (! option && this.multiple && (this.selectedOption || []).length > 0) {
             option = this.selectedOption[0];
         } else if (! option && this.selectedOption && this.selectedOption.value === value) {
             option = this.selectedOption;

resources/js/components/custom-select.js

@@ -2,22 +2,22 @@
         {{ $configToJson() }}
         @if ($attributes->hasStartsWith('wire:model'))
             value: @entangle($attributes->wire('model')),
+            _wire: $wire,
         @else
             value: {{ $selectedKeyToJS() }},
         @endif
         @if ($attributes->hasStartsWith('wire:filter'))
             wireFilter: '{{ $attributes->wire('filter')->value() }}',
         @endif
      })"
-     x-init="$nextTick(() => { initialize({{ $attributes->hasStartsWith('wire:model') ? '$wire' : 'null' }}, $dispatch) })"
-     x-on:click.outside="close()"
-     x-on:keydown.escape="close()"
-     x-on:keydown.enter.stop.prevent="onEnter()"
-     x-on:keydown.arrow-up.prevent="focusPreviousOption()"
-     x-on:keydown.arrow-down.prevent="focusNextOption()"
-     x-on:keydown.home.prevent="onHome()"
-     x-on:keydown.end.prevent="onEnd()"
-     x-on:keydown.tab="close()"
+     x-on:click.outside="close"
+     x-on:keydown.escape="close"
+     x-on:keydown.enter.stop.prevent="onEnter"
+     x-on:keydown.arrow-up.prevent="focusPreviousOption"
+     x-on:keydown.arrow-down.prevent="focusNextOption"
+     x-on:keydown.home.prevent="onHome"
+     x-on:keydown.end.prevent="onEnd"
+     x-on:keydown.tab="close"
      wire:ignore.self
      class="{{ $getContainerClass() }}"
      {{ $extraAttributes }}

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

@@ -15,6 +15,8 @@ class CustomSelect extends Select
     public null|string $placeholder;
     public null|string $emptyText;
 
+    protected bool $jsonEncodeArrayValues = false;
+
     public function __construct(
         public null | string $name = null,
         public null | string $id = null,
@@ -105,7 +107,7 @@ public function selectedKeyToJS(): mixed
 
         return is_string($this->selectedKey)
             ? "'{$this->selectedKey}'"
-            : $this->selectedKey;
+            : json_encode($this->selectedKey);
     }
 
     public function getContainerClass(): string

src/Components/Inputs/CustomSelect.php

@@ -14,6 +14,11 @@ class Input extends BladeComponent
     use HandlesValidationErrors;
     use HasAddons;
 
+    /*
+     * Normally we want arrays to be encoded, but some components don't need that, like CustomSelect.
+     */
+    protected bool $jsonEncodeArrayValues = true;
+
     /** @var string */
     public const DEFAULT_INLINE_ADDON_PADDING = 'pl-16 sm:pl-14';
 
@@ -53,7 +58,7 @@ public function __construct(
         $this->trailingAddonPadding = $trailingAddonPadding;
         $this->trailingIcon = $trailingIcon;
 
-        if (is_array($this->value)) {
+        if (is_array($this->value) && $this->jsonEncodeArrayValues) {
             $this->value = json_encode($this->value);
         }
     }