From d46a565e6cc3b618d8d5842232e07f1287e2e306 Mon Sep 17 00:00:00 2001
From: w3cj <cj@null.computer>
Date: Fri, 12 Apr 2024 05:33:56 -0600
Subject: [PATCH] feat: allow tab in textarea

---
 app/View/Components/Forms/Textarea.php          |  1 +
 .../views/components/forms/textarea.blade.php   | 17 ++++++++++++++++-
 .../project/service/edit-compose.blade.php      |  2 +-
 .../proxy/new-dynamic-configuration.blade.php   |  2 +-
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/View/Components/Forms/Textarea.php b/app/View/Components/Forms/Textarea.php
index 95e0ef5d2..86547cf65 100644
--- a/app/View/Components/Forms/Textarea.php
+++ b/app/View/Components/Forms/Textarea.php
@@ -22,6 +22,7 @@ public function __construct(
         public bool    $required = false,
         public bool    $disabled = false,
         public bool    $readonly = false,
+        public bool    $allowTab = false,
         public ?string $helper = null,
         public bool    $realtimeValidation = false,
         public bool    $allowToPeak = true,
diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
index e9bc4e8c1..a4b499c9c 100644
--- a/resources/views/components/forms/textarea.blade.php
+++ b/resources/views/components/forms/textarea.blade.php
@@ -1,3 +1,18 @@
+<script>
+    function handleKeydown(e) {
+        if (e.keyCode === 9) {
+            e.preventDefault();
+
+            e.target.setRangeText(
+                '\t',
+                e.target.selectionStart,
+                e.target.selectionStart,
+                'end'
+            );
+        }
+    }
+</script>
+
 <div class="flex-1 form-control">
     @if ($label)
         <label class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
@@ -41,7 +56,7 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
 
         </div>
     @else
-        <textarea placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
+        <textarea @keydown.tab="{{ $allowTab }} && handleKeydown" placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
             @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
         @else
     wire:model={{ $value ?? $id }}
diff --git a/resources/views/livewire/project/service/edit-compose.blade.php b/resources/views/livewire/project/service/edit-compose.blade.php
index 7590e5fcc..d3e88f3ae 100644
--- a/resources/views/livewire/project/service/edit-compose.blade.php
+++ b/resources/views/livewire/project/service/edit-compose.blade.php
@@ -4,7 +4,7 @@
         name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage
         menu.</div>
     <div x-cloak x-show="raw" class="font-mono">
-        <x-forms.textarea rows="20" id="service.docker_compose_raw">
+        <x-forms.textarea allowTab rows="20" id="service.docker_compose_raw">
         </x-forms.textarea>
     </div>
     <div x-cloak x-show="raw === false" class="font-mono">
diff --git a/resources/views/livewire/server/proxy/new-dynamic-configuration.blade.php b/resources/views/livewire/server/proxy/new-dynamic-configuration.blade.php
index d31afdb07..fadd3f3bd 100644
--- a/resources/views/livewire/server/proxy/new-dynamic-configuration.blade.php
+++ b/resources/views/livewire/server/proxy/new-dynamic-configuration.blade.php
@@ -1,5 +1,5 @@
 <form wire:submit.prevent="addDynamicConfiguration" class="flex flex-col w-full gap-4">
     <x-forms.input autofocus id="fileName" label="Filename" required />
-    <x-forms.textarea id="value" label="Configuration" required rows="20" />
+    <x-forms.textarea allowTab id="value" label="Configuration" required rows="20" />
     <x-forms.button type="submit" @click="slideOverOpen=false">Save</x-forms.button>
 </form>