Choices: add support for placeholders (#645)

* Choices: add support for placeholders * WIP --------- Co-authored-by: Robson Tenório <rrtenorio@gmail.com>
robsontenorio · Sep 28, 2024 · bad16e3 · bad16e3
1 parent 169c7ff
commit bad16e3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/View/Components/Choices.php b/src/View/Components/Choices.php
@@ -101,7 +101,7 @@ public function render(): View|Closure|string
                             isDisabled: {{ json_encode($isDisabled()) }},
                             isRequired: {{ json_encode($isRequired()) }},
                             minChars: {{ $minChars }},
-
+                            
                             init() {
                                 // Fix weird issue when navigating back
                                 document.addEventListener('livewire:navigating', () => {
@@ -283,6 +283,13 @@ class="outline-none mt-0.5 bg-transparent w-20"
                                     @keydown.debounce.{{ $debounce }}="search($el.value)"
                                 @endif
                              />
+
+                            <!-- PLACEHOLDER -->
+                            @if (!$compact && $attributes->has('placeholder'))
+                                <span @class(["absolute inset-0 mt-2.5 me-8 truncate text-base text-gray-400 pointer-events-none", $icon ? "ms-10" : "ms-4"]) x-show="isSelectionEmpty && !focused">
+                                    {{ $attributes->get('placeholder') }}
+                                </span>
+                            @endif
                         </div>
 
                         <!-- APPEND -->

diff --git a/src/View/Components/ChoicesOffline.php b/src/View/Components/ChoicesOffline.php
@@ -273,6 +273,13 @@ public function render(): View|Closure|string
                                 :class="(isReadonly || isDisabled || !isSearchable || !focused) && '!w-1'"
                                 class="outline-none mt-0.5 bg-transparent w-20"
                              />
+
+                            <!-- PLACEHOLDER -->
+                            @if (!$compact && $attributes->has('placeholder'))
+                                <span @class(["absolute inset-0 mt-2.5 me-8 truncate text-base text-gray-400 pointer-events-none", $icon ? "ms-10" : "ms-4"]) x-show="!focused && isSelectionEmpty">
+                                    {{ $attributes->get('placeholder') }}
+                                </span>
+                            @endif
                         </div>