@formio/js 5.3.0-rc.4 → 5.3.0

package/lib/mjs/components/select/Select.js

@@ -246,7 +246,14 @@ export default class SelectComponent extends ListComponent {
         return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
     }
     selectValueAndLabel(data) {
-        const value = this.getOptionValue(this.isEntireObjectDisplay() && !this.itemValue(data) ? data : this.itemValue(data));
+        let value;
+        // If the select is a resource reference, use the actual object value
+        if (this.component.reference && this.isSelectResource) {
+            value = this.getOptionValue(data);
+        }
+        else {
+            value = this.getOptionValue(this.isEntireObjectDisplay() && !this.itemValue(data) ? data : this.itemValue(data));
+        }
         return {
             value,
             label: this.itemTemplate(this.isEntireObjectDisplay() && !_.isObject(data.data) ? { data: data } : data, value),
@@ -285,6 +292,10 @@ export default class SelectComponent extends ListComponent {
                 else {
                     data = selectData;
                 }
+                // use template data for reference fields to make sure the data is updated
+                if (this.component.reference && this.templateData[templateValue]) {
+                    data = this.templateData[templateValue];
+                }
             }
         }
         if (typeof data === 'string' || typeof data === 'number') {
@@ -902,15 +913,8 @@ export default class SelectComponent extends ListComponent {
         if (!input) {
             return;
         }
-        this.addEventListener(input, this.inputInfo.changeEvent, (event) => {
-            let value = null;
-            if (this.component.widget === "html5") {
-                value = event.target.value;
-                if (this.component.multiple) {
-                    value = Array.from(event.target.selectedOptions).map(opt => opt.value);
-                }
-            }
-            this.updateValue(value, {
+        this.addEventListener(input, this.inputInfo.changeEvent, () => {
+            this.updateValue(null, {
                 modified: true
             });
         });
@@ -1223,14 +1227,20 @@ export default class SelectComponent extends ListComponent {
             }
         }
         else if (this.refs.selectContainer) {
-            value = this.refs.selectContainer.value;
-            if (this.valueProperty === '' || this.isEntireObjectDisplay()) {
+            value = this.component.multiple ? value : this.refs.selectContainer.value;
+            if (this.valueProperty === '' || this.isEntireObjectDisplay() || this.component.multiple) {
                 if (value === '') {
                     return {};
                 }
-                const option = this.selectOptions[value] || this.selectOptions.find((option) => option.id === value);
-                if (option && _.isObject(option.value)) {
-                    value = option.value;
+                if (!this.component.multiple) {
+                    const option = this.selectOptions[value] || this.selectOptions.find((option) => option.id === value);
+                    if (option && _.isObject(option.value)) {
+                        value = option.value;
+                    }
+                }
+                else {
+                    const options = this.selectOptions.filter((option) => option.element.selected);
+                    value = options.map((option) => option.value);
                 }
             }
         }

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -140,7 +140,7 @@ export default class SelectBoxesComponent extends RadioComponent {
         if (this.isSelectURL &&
             this.templateData &&
             _.every(checkedValues, (val) => this.templateData[val])) {
-            const submission = this.root.submission;
+            const submission = this.root?.submission;
             if (!submission.metadata.selectData) {
                 submission.metadata.selectData = {};
             }

package/lib/mjs/components/signature/Signature.js

@@ -94,7 +94,7 @@ export default class SignatureComponent extends Input {
                 this.signaturePad.clear();
             }
             else if (changed) {
-                this.triggerChange();
+                this.triggerChange?.();
             }
         }
         if (this.signaturePad && this.dataValue && this.signaturePad.isEmpty()) {

package/lib/mjs/components/table/Table.js

@@ -122,7 +122,7 @@ export default class TableComponent extends NestedComponent {
                     }
                     else if (lastNonEmptyRow[colIndex]) {
                         column.components = _.cloneDeep(lastNonEmptyRow[colIndex].components);
-                        BuilderUtils.uniquify(this.root._form.components, column);
+                        BuilderUtils.uniquify(this.root?._form.components, column);
                     }
                 }
                 _.each(column.components, (comp) => {

package/lib/mjs/components/tabs/Tabs.js

@@ -145,7 +145,7 @@ export default class TabsComponent extends NestedComponent {
             this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');
         }
         this.setValue(this.data);
-        this.triggerChange();
+        this.triggerChange?.();
     }
     beforeFocus(component) {
         if ('beforeFocus' in this.parent) {

package/lib/mjs/components/textfield/TextField.js

@@ -121,8 +121,15 @@ export default class TextFieldComponent extends Input {
         }
         // If no value is provided, then set the defaultValue.
         if (!value.value) {
-            const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;
-            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
+            let defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;
+            if (Array.isArray(defaultValue)) {
+                defaultValue = defaultValue[0];
+            }
+            // Extract string if defaultValue is a mask object to prevent nesting
+            if (defaultValue && typeof defaultValue === 'object' && defaultValue.hasOwnProperty('value')) {
+                defaultValue = defaultValue.value;
+            }
+            value.value = defaultValue;
         }
         return value;
     }

package/lib/mjs/package.json

@@ -1,5 +1,5 @@
 {
     "type": "module",
-    "version": "5.3.0-rc.3"
+    "version": "5.3.0"
     
 }

package/lib/mjs/utils/index.d.ts

@@ -150,6 +150,7 @@ declare const FormioUtils: {
     getFocusableElements(element: HTMLElement): NodeList<HTMLElement>;
     getComponentSavedTypes(fullSchema: import("@formio/core").Component): string[] | null;
     hasEncodedTimezone(value: string): boolean;
+    screenReaderSpeech(text: string): void;
     firstNonNil: any;
     componentValueTypes: {
         number: string;

package/lib/mjs/utils/utils.d.ts

@@ -499,6 +499,11 @@ export function getComponentSavedTypes(fullSchema: import('@formio/core').Compon
  * @returns {boolean} if value has encoded timezone
  */
 export function hasEncodedTimezone(value: string): boolean;
+/**
+ * Outputs text to screen reader
+ * @param {string} text The text to output to screen readers
+ */
+export function screenReaderSpeech(text: string): void;
 /**
  * Map values through unfold and return first non-nil value.
  * @param {Array<T>} collection - The collection to map through unfold.;

package/lib/mjs/utils/utils.js

@@ -1619,3 +1619,19 @@ export function hasEncodedTimezone(value) {
         value.substring(value.length - 1) === 'Z' ||
         value.match(/[+|-][0-9]{2}:[0-9]{2}$/));
 }
+/**
+ * Outputs text to screen reader
+ * @param {string} text The text to output to screen readers
+ */
+export function screenReaderSpeech(text) {
+    const ariaSpeechElement = document.createElement('div');
+    ariaSpeechElement.setAttribute("style", "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;white-space: nowrap;");
+    document.body.append(ariaSpeechElement);
+    ariaSpeechElement.ariaLive = 'assertive';
+    setTimeout(() => {
+        ariaSpeechElement.textContent = text;
+        setTimeout(() => {
+            ariaSpeechElement.remove();
+        }, 1000);
+    }, 100);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.3.0-rc.4",
+  "version": "5.3.0",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -88,8 +88,8 @@
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.0",
     "vanilla-picker": "^2.12.3",
-    "@formio/bootstrap": "^3.2.0-rc.0",
-    "@formio/core": "^2.6.0-rc.3"
+    "@formio/core": "^2.6.0",
+    "@formio/bootstrap": "^3.2.0"
   },
   "devDependencies": {
     "@types/node": "^22.15.19",