Add a JavaScript data handler for the form field

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Select.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Select.ts
new file mode 100644 (file)
index 0000000..4222d3e
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Select.ts
@@ -0,0 +1,29 @@
+/**
+ * Data handler for a form builder field in an Ajax form represented by select element that allows multiple selections.
+ *
+ * @author      Olaf Braun
+ * @copyright   2001-2024 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since       6.1
+ */
+
+import Field from "./Field";
+import { FormBuilderData } from "../Data";
+
+export default class Select extends Field {
+  protected _getData(): FormBuilderData {
+    const values = Array.from(this._field!.querySelectorAll<HTMLOptionElement>(`option`))
+      .map((input) => {
+        if (input.selected) {
+          return input.value;
+        }
+
+        return null;
+      })
+      .filter((v) => v !== null) as string[];
+
+    return {
+      [this._fieldId]: values,
+    };
+  }
+}

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Select.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Select.js
new file mode 100644 (file)
index 0000000..1f3dbcf
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Select.js
@@ -0,0 +1,29 @@
+/**
+ * Data handler for a form builder field in an Ajax form represented by select element that allows multiple selections.
+ *
+ * @author      Olaf Braun
+ * @copyright   2001-2024 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since       6.1
+ */
+define(["require", "exports", "tslib", "./Field"], function (require, exports, tslib_1, Field_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    Field_1 = tslib_1.__importDefault(Field_1);
+    class Select extends Field_1.default {
+        _getData() {
+            const values = Array.from(this._field.querySelectorAll(`option`))
+                .map((input) => {
+                if (input.selected) {
+                    return input.value;
+                }
+                return null;
+            })
+                .filter((v) => v !== null);
+            return {
+                [this._fieldId]: values,
+            };
+        }
+    }
+    exports.default = Select;
+});

diff --git a/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectFormField.class.php
index fa6ba7aa35aa20e5509be60e03e4b5479012a2cd..7ccfc0e87403cdbf488de4ae46b44fce659a314b 100644 (file)
--- a/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/MultipleSelectFormField.class.php
@@ -15,7 +15,7 @@ class MultipleSelectFormField extends MultipleSelectionFormField
     /**
      * @inheritDoc
      */
-    protected $javaScriptDataHandlerModule = '';
+    protected $javaScriptDataHandlerModule = 'WoltLabSuite/Core/Form/Builder/Field/Select';
 
     /**
      * @inheritDoc