fix: Update key value after remote state change

packages/admin/dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=5b661c24e4e59435e7a7",
-    "/app.css": "/app.css?id=d8c7679a6413877362cd"
+    "/app.js": "/app.js?id=1d29f5902952590ec721",
+    "/app.css": "/app.css?id=e6651b3995e40f8fa71a"
 }

packages/admin/dist/module.esm.js

@@ -15926,24 +15926,18 @@ var file_upload_default = (Alpine) => {
 // packages/forms/resources/js/components/key-value.js
 var key_value_default = (Alpine) => {
   Alpine.data("keyValueFormComponent", ({
-    canAddRows,
-    canDeleteRows,
     state: state2
   }) => ({
-    canAddRows,
-    canDeleteRows,
     state: state2,
     rows: [],
     init: function() {
-      for (let [key, value] of Object.entries(this.state ?? {})) {
-        this.rows.push({
-          key,
-          value
-        });
-      }
+      this.updateRows();
       if (this.rows.length <= 0) {
         this.addRow();
       }
+      this.$watch("state", () => {
+        this.updateRows();
+      });
     },
     addRow: function() {
       this.rows.push({key: "", value: ""});
@@ -15956,6 +15950,16 @@ var key_value_default = (Alpine) => {
       }
       this.updateState();
     },
+    updateRows: function() {
+      let rows = [];
+      for (let [key, value] of Object.entries(this.state ?? {})) {
+        rows.push({
+          key,
+          value
+        });
+      }
+      this.rows = rows;
+    },
     updateState: function() {
       let state3 = {};
       this.rows.forEach((row) => {

packages/forms/dist/module.esm.js

@@ -15926,24 +15926,18 @@ var file_upload_default = (Alpine) => {
 // packages/forms/resources/js/components/key-value.js
 var key_value_default = (Alpine) => {
   Alpine.data("keyValueFormComponent", ({
-    canAddRows,
-    canDeleteRows,
     state: state2
   }) => ({
-    canAddRows,
-    canDeleteRows,
     state: state2,
     rows: [],
     init: function() {
-      for (let [key, value] of Object.entries(this.state ?? {})) {
-        this.rows.push({
-          key,
-          value
-        });
-      }
+      this.updateRows();
       if (this.rows.length <= 0) {
         this.addRow();
       }
+      this.$watch("state", () => {
+        this.updateRows();
+      });
     },
     addRow: function() {
       this.rows.push({key: "", value: ""});
@@ -15956,6 +15950,16 @@ var key_value_default = (Alpine) => {
       }
       this.updateState();
     },
+    updateRows: function() {
+      let rows = [];
+      for (let [key, value] of Object.entries(this.state ?? {})) {
+        rows.push({
+          key,
+          value
+        });
+      }
+      this.rows = rows;
+    },
     updateState: function() {
       let state3 = {};
       this.rows.forEach((row) => {

packages/forms/resources/js/components/key-value.js

@@ -1,28 +1,21 @@
 export default (Alpine) => {
     Alpine.data('keyValueFormComponent', ({
-        canAddRows,
-        canDeleteRows,
         state,
     }) => ({
-        canAddRows,
-
-        canDeleteRows,
-
         state,
 
         rows: [],
 
         init: function () {
-            for (let [key, value] of Object.entries(this.state ?? {})) {
-                this.rows.push({
-                    key,
-                    value,
-                })
-            }
+            this.updateRows()
 
             if (this.rows.length <= 0) {
                 this.addRow()
             }
+
+            this.$watch('state', () => {
+                this.updateRows()
+            })
         },
 
         addRow: function () {
@@ -41,6 +34,19 @@ export default (Alpine) => {
             this.updateState()
         },
 
+        updateRows: function () {
+            let rows = []
+
+            for (let [key, value] of Object.entries(this.state ?? {})) {
+                rows.push({
+                    key,
+                    value,
+                })
+            }
+
+            this.rows = rows
+        },
+
         updateState: function () {
             let state = {}
 

packages/forms/resources/views/components/key-value.blade.php

@@ -9,8 +9,6 @@
 >
     <div
         x-data="keyValueFormComponent({
-            canAddRows: {{ json_encode($canAddRows()) }},
-            canDeleteRows: {{ json_encode($canDeleteRows()) }},
             state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},
         })"
         {{ $attributes->merge($getExtraAttributes()) }}
@@ -43,10 +41,7 @@
                     class="divide-y whitespace-nowrap"
                 >
                     <template x-for="(row, index) in rows" x-bind:key="index" x-ref="rowTemplate">
-                        <tr
-                            x-bind:class="{ 'bg-gray-50': index % 2 }"
-                            class="divide-x"
-                        >
+                        <tr class="divide-x">
                             <td>
                                 <input
                                     type="text"
@@ -89,19 +84,17 @@
             </table>
 
             @if ($canAddRows() && $canEditKeys())
-                <div>
-                    <button
-                        x-on:click="addRow"
-                        type="button"
-                        class="px-4 py-2 flex items-center space-x-1"
-                    >
-                        <x-heroicon-s-plus class="w-5 h-5" />
+                <button
+                    x-on:click="addRow"
+                    type="button"
+                    class="w-full px-4 py-2 flex items-center space-x-1 text-sm font-medium text-gray-800 hover:bg-gray-50 focus:bg-gray-50"
+                >
+                    <x-heroicon-s-plus class="w-4 h-4" />
 
-                        <span>
-                            {{ $getAddButtonLabel() }}
-                        </span>
-                    </button>
-                </div>
+                    <span>
+                        {{ $getAddButtonLabel() }}
+                    </span>
+                </button>
             @endif
         </div>
     </div>

packages/forms/src/Components/KeyValue.php

@@ -32,6 +32,15 @@ class KeyValue extends Field
     {
         parent::setUp();
 
+        $this->default([]);
+
+        $this->dehydrateStateUsing(function ($state) {
+            return collect($state)
+                ->filter(fn (?string $value, ?string $key): bool => filled($key))
+                ->map(fn (?string $value): ?string => filled($value) ? $value : null)
+                ->toArray();
+        });
+
         $this->addButtonLabel(__('forms::components.key_value.buttons.add.label'));
 
         $this->deleteButtonLabel(__('forms::components.key_value.buttons.delete.label'));