Merge pull request #340 from laravel-filament/fix/empty-select-options

fix: Empty select options
filamentphp · Apr 11, 2021 · fb88b2e · fb88b2e
2 parents e579da0 + ce6d401
commit fb88b2e
Show file tree

Hide file tree

Showing 4 changed files with 3,232 additions and 25 deletions.
diff --git a/dist/css/filament.css b/dist/css/filament.css
diff --git a/dist/js/filament.js b/dist/js/filament.js
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/js/filament.js": "/js/filament.js?id=210c4f5bc98fdf1aa267",
-    "/css/filament.css": "/css/filament.css?id=a83e63e97610dfc5c66f"
+    "/js/filament.js": "/js/filament.js",
+    "/css/filament.css": "/css/filament.css"
 }
diff --git a/packages/forms/resources/views/components/select.blade.php b/packages/forms/resources/views/components/select.blade.php
@@ -231,14 +231,16 @@ class="relative"
             @endunless
             class="bg-white relative w-full border rounded shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 {{ $formComponent->isDisabled() ? 'text-gray-500' : '' }} {{ $errors->has($formComponent->getName()) ? 'border-danger-600 motion-safe:animate-shake' : 'border-gray-300' }}"
         >
-            <span
+            <input
                 x-show="! open"
-                x-text="displayValue ?? '{{ __($formComponent->getPlaceholder()) }}'"
+                x-bind:value="displayValue ?? '{{ __($formComponent->getPlaceholder()) }}'"
+                type="text"
+                readonly
+                class="w-full h-full p-0 border-0 focus:ring-0 focus:outline-none"
                 x-bind:class="{
                     'text-gray-400': displayValue === null,
                 }"
-                class="block truncate"
-            ></span>
+            />
 
             @unless ($formComponent->isDisabled())
                 <input
@@ -295,16 +297,16 @@ class="py-1 overflow-auto text-base leading-6 rounded shadow-sm max-h-60 focus:o
                                 'text-white bg-blue-600': index === focusedOptionIndex,
                                 'text-gray-900': index !== focusedOptionIndex,
                             }"
-                            class="relative py-2 pl-3 text-gray-900 cursor-default select-none pr-9"
+                            class="relative py-2 pl-3 h-10 flex items-center text-gray-900 cursor-default select-none pr-9"
                         >
-                                <span
-                                    x-text="Object.values(options)[index]"
-                                    x-bind:class="{
-                                        'font-medium': index === focusedOptionIndex,
-                                        'font-normal': index !== focusedOptionIndex,
-                                    }"
-                                    class="block font-normal truncate"
-                                ></span>
+                            <span
+                                x-text="Object.values(options)[index]"
+                                x-bind:class="{
+                                    'font-medium': index === focusedOptionIndex,
+                                    'font-normal': index !== focusedOptionIndex,
+                                }"
+                                class="block font-normal truncate"
+                            ></span>
 
                             <span
                                 x-show="key === value"
@@ -314,12 +316,12 @@ class="block font-normal truncate"
                                 }"
                                 class="absolute inset-y-0 right-0 flex items-center pr-4 text-blue-600"
                             >
-                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
-                                        <path fill-rule="evenodd"
-                                              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                                              clip-rule="evenodd" />
-                                    </svg>
-                                </span>
+                                <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd"
+                                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                          clip-rule="evenodd" />
+                                </svg>
+                            </span>
                         </li>
                     </template>