array field add ref

client/res/templates/modals/array-field-add.tpl

@@ -1,8 +1,8 @@
-{{#unless optionList}}
+{{#unless optionDataList}}
     {{translate 'No Data'}}
 {{/unless}}
 
-{{#if optionList}}
+{{#if optionDataList}}
     <div class="margin-bottom-2x margin-top">
         <input
             type="text"
@@ -14,18 +14,21 @@
         >
     </div>
     <ul class="list-group list-group-panel array-add-list-group no-side-margin">
-    {{#each optionList}}
-        <li class="list-group-item clearfix" data-name="{{./this}}">
-            <input
-                class="cell form-checkbox form-checkbox-small"
-                type="checkbox"
-                data-value="{{./this}}"
-            >
-            <a role="button" tabindex="0" class="add text-bold" data-value="{{./this}}">
-                {{#if ../translatedOptions}}{{prop ../translatedOptions this}}{{else}}{{./this}}{{/if}}
-            </a>
-        </li>
-    {{/each}}
+        {{#each optionDataList}}
+            <li class="list-group-item clearfix" data-name="{{value}}">
+                <input
+                    class="cell form-checkbox form-checkbox-small"
+                    type="checkbox"
+                    data-value="{{value}}"
+                >
+                <a
+                    role="button"
+                    tabindex="0"
+                    class="add text-bold"
+                    data-value="{{value}}"
+                >{{label}}</a>
+            </li>
+        {{/each}}
     </ul>
 {{/if}}
 

client/src/views/fields/array.js

@@ -870,8 +870,12 @@ class ArrayFieldView extends BaseFieldView {
         };
     }
 
+    /**
+     * @protected
+     * @return {Promise<import('views/modals/array-field-add').default>}
+     */
     actionAddItem() {
-        this.createView('addModal', this.addItemModalView, this.getAddItemModalOptions(), view => {
+        return this.createView('dialog', this.addItemModalView, this.getAddItemModalOptions(), view => {
             view.render();
 
             view.once('add', item => {

client/src/views/modals/array-field-add.js

@@ -37,8 +37,7 @@ class ArrayFieldAddModalView extends ModalView {
 
     data() {
         return {
-            optionList: this.optionList,
-            translatedOptions: this.translations,
+            optionDataList: this.getOptionDataList(),
         };
     }
 
@@ -76,7 +75,11 @@ class ArrayFieldAddModalView extends ModalView {
     setup() {
         this.headerText = this.translate('Add Item');
         this.checkedList = [];
+
+        /** @type {Object.<string, string>} */
         this.translations = Espo.Utils.clone(this.options.translatedOptions || {});
+
+        /** @type {string[]} */
         this.optionList = this.options.options || [];
 
         this.optionList.forEach(item => {
@@ -112,6 +115,17 @@ class ArrayFieldAddModalView extends ModalView {
         }, 100);
     }
 
+    /**
+     * @protected
+     * @return {{value: string, label: string}[]}
+     */
+    getOptionDataList() {
+        return this.optionList.map(value => ({
+            value: value,
+            label: (value in this.translations) ? this.translations[value] : value,
+        }));
+    }
+
     processQuickSearch(text) {
         text = text.trim();