Allow fixed position custom select menu

Author: rawilk

dist/form-components.js

@@ -1 +1 @@
-{"/form-components.js":"/form-components.js?id=f717ced4eb4aba34bb40"}
+{"/form-components.js":"/form-components.js?id=d6867b5730fb6129fc03"}

dist/form-components.js.map

@@ -459,6 +459,12 @@ export default function customSelect(state) {
                 return;
             }
 
+            if (this.fixedPosition) {
+                this.positionFixedMenu();
+
+                return;
+            }
+
             this.$refs.container.classList.remove('custom-menu-top');
 
             // give a little bit of breathing room at the bottom of the screen.
@@ -472,5 +478,31 @@ export default function customSelect(state) {
                 this.$refs.container.classList.add('custom-menu-top');
             }
         },
+
+        positionFixedMenu() {
+            // So we can accurately determine where it should be placed...
+            this.$refs.container.style.position = 'absolute';
+            this.$refs.container.style.top = null;
+
+            const { width, left: buttonLeft, top: buttonTop } = this.$refs.button.getBoundingClientRect();
+
+            // give a little bit of breathing room at the bottom of the screen.
+            const tolerance = 10;
+            const menuHeight = this.$refs.menu.offsetHeight;
+            const largestHeight = window.innerHeight - menuHeight - tolerance;
+
+            const { top } = this.$refs.menu.getBoundingClientRect();
+
+            if (top > largestHeight) {
+                const menuTop = buttonTop - menuHeight - tolerance;
+                this.$refs.container.style.top = `${menuTop}px`;
+            } else {
+                this.$refs.container.style.top = `${top}px`;
+            }
+
+            this.$refs.container.style.position = 'fixed';
+            this.$refs.container.style.width = `${width}px`;
+            this.$refs.container.style.left = `${buttonLeft}px`;
+        },
     };
 }

dist/manifest.json

@@ -19,6 +19,7 @@ class CustomSelect extends Select
     public bool $filterable;
     public $clearIcon;
     public bool $disabled;
+    public bool $fixedPosition;
 
     public function __construct(
         string $name = '',
@@ -38,7 +39,8 @@ public function __construct(
         string $textKey = 'text',
         bool $filterable = false,
         string $clearIcon = null,
-        bool $disabled = false
+        bool $disabled = false,
+        bool $fixedPosition = false
     ) {
         parent::__construct(
             $name,
@@ -64,6 +66,7 @@ public function __construct(
         $this->filterable = $filterable;
         $this->clearIcon = $clearIcon ?? config('form-components.components.custom-select.clear_icon');
         $this->disabled = $disabled;
+        $this->fixedPosition = $fixedPosition;
     }
 
     public function buttonClass(): string
@@ -96,6 +99,7 @@ public function config(): array
             'filterable' => $this->filterable,
             'placeholder' => $this->placeholder,
             'selectId' => Str::random(8),
+            'fixedPosition' => $this->fixedPosition,
         ];
     }
 

resources/js/components/custom-select.js

@@ -63,7 +63,7 @@ protected function extractDataFromOption($option): array
 
         if ($option instanceof Model) {
             return [
-                'value' => $option->{$this->valueKey},
+                'value' => (string) $option->{$this->valueKey},
                 'text' => $option->{$this->textKey},
             ];
         }
@@ -73,7 +73,7 @@ protected function extractDataFromOption($option): array
         }
 
         return [
-            'value' => $option,
+            'value' => (string) $option,
             'text' => $option,
         ];
     }
@@ -85,13 +85,13 @@ protected function extractDataFromArray($option): array
             $key = array_key_first($option);
 
             return [
-                'value' => $key,
+                'value' => (string) $key,
                 'text' => $option[$key],
             ];
         }
 
         return [
-            'value' => $option[$this->valueKey] ?? '',
+            'value' => (string) ($option[$this->valueKey] ?? ''),
             'text' => $option[$this->textKey] ?? '',
         ];
     }