fix: Reactivity choices

resources/js/alpine/formBuilder.js

@@ -27,7 +27,54 @@ export default (name = '', initData = {}, reactive = {}) => ({
       if (!t.blockWatch) {
         let focused = document.activeElement
 
+        let payload = JSON.parse(
+          JSON.stringify(value)
+        )
+
+        // choices hack
+        let choices = false
+
+        if(focused.tagName.toLowerCase() === 'body') {
+          await t.$nextTick
+
+          for (const [key, value] of Object.entries(payload)) {
+            let el = t.$root.querySelector(
+              `[data-reactive-column='${key}']`,
+            )
+
+            if(el.getAttribute('class').includes('choices')) {
+              if(el.options.length === 0) {
+                payload[key] = []
+              }
+            }
+          }
+        }
+
+        if(focused.getAttribute('class').includes('choices')) {
+          choices = true
+
+          focused = focused.tagName.toLowerCase()  === 'input'
+            ? focused.parentElement.querySelector('select')
+            : focused.querySelector('select')
+        }
+
+        if(choices && focused.multiple) {
+          let values = [];
+
+          for (let i = 0; i < focused.options.length; i++) {
+            values.push(focused.options[i].value)
+          }
+
+          let c = focused.getAttribute('data-reactive-column')
+          payload[c] = values
+        }
+        // / end of choices hack
+
         componentRequestData.withAfterCallback(function (data) {
+          if(data.fields === undefined) {
+            return
+          }
+
           for (let [column, html] of Object.entries(data.fields)) {
             if (typeof html === 'string') {
               const wrapper = t.$root.querySelector('.field-' + column + '-wrapper')
@@ -43,7 +90,9 @@ export default (name = '', initData = {}, reactive = {}) => ({
                 focused !== document.body &&
                 isTextInput(focused) &&
                 !containsAttribute(focused, 'x-model.lazy')
-                  ? t.$root.querySelector('#' + focused.id)
+                  ? t.$root.querySelector(
+                    `[data-reactive-column='${focused.getAttribute('data-reactive-column')}']`,
+                  )
                   : null
 
               if (input) {
@@ -72,7 +121,7 @@ export default (name = '', initData = {}, reactive = {}) => ({
           'post',
           {
             _component_name: t.name,
-            values: value,
+            values: payload,
           },
           {},
           componentRequestData,

src/Traits/Fields/Reactivity.php

@@ -62,6 +62,7 @@ public function reactive(
             $attribute => "reactive.{$this->column()}",
             'class' => "field-{$this->column()}-element",
             'data-column' => $this->column(),
+            'data-reactive-column' => $this->column(),
         ])->customWrapperAttributes([
             'class' => "field-{$this->column()}-wrapper",
         ]);