From 54d1e09bc12bd60dce43f8b915aa2960b1690f51 Mon Sep 17 00:00:00 2001
From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Fri, 2 Aug 2024 16:09:08 +0200
Subject: [PATCH] Add a JavaScript data handler for the form field

---
 .../Core/Form/Builder/Field/Select.ts         | 29 +++++++++++++++++++
 .../Core/Form/Builder/Field/Select.js         | 29 +++++++++++++++++++
 .../field/MultipleSelectFormField.class.php   |  2 +-
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 ts/WoltLabSuite/Core/Form/Builder/Field/Select.ts
 create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Select.js

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Select.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Select.ts
new file mode 100644
index 0000000000..4222d3eeb9
--- /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
index 0000000000..1f3dbcf9de
--- /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 fa6ba7aa35..7ccfc0e874 100644
--- 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
-- 
2.20.1