From 3310a7c7c99cc202d1f30dc0211d2fc3bf0dd859 Mon Sep 17 00:00:00 2001
From: Sandro Lutz <code@temparus.ch>
Date: Wed, 29 Aug 2018 00:09:25 +0200
Subject: [PATCH] Fix issues with label not showing on JSON schema form

---
 src/components/form/inputGroup.js  |  5 +-
 src/components/form/selectGroup.js | 74 +++++++++++++++---------------
 2 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/src/components/form/inputGroup.js b/src/components/form/inputGroup.js
index 8bc2df00..c693f785 100644
--- a/src/components/form/inputGroup.js
+++ b/src/components/form/inputGroup.js
@@ -1,4 +1,5 @@
 import m from 'mithril';
+import { i18n } from '../../models/language';
 
 export default class InputGroup {
   constructor(vnode) {
@@ -33,7 +34,7 @@ export default class InputGroup {
     if (['radio', 'checkbox'].includes(args.type)) {
       return m('div', { class: groupClasses }, [
         m(`input[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, args),
-        m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title),
+        m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)),
         errorField,
       ]);
     }
@@ -51,7 +52,7 @@ export default class InputGroup {
     }
 
     return m('div', { class: groupClasses }, [
-      m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title),
+      m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)),
       m(`input[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`, args),
       m('datalist', { id: args.list }, this.suggestions.map(item => m('option', item))),
       errorField,
diff --git a/src/components/form/selectGroup.js b/src/components/form/selectGroup.js
index 34510e2b..2efffa1e 100644
--- a/src/components/form/selectGroup.js
+++ b/src/components/form/selectGroup.js
@@ -1,6 +1,8 @@
 import m from 'mithril';
 
 import inputGroup from './inputGroup';
+import Dropdown from '../Dropdown';
+import { i18n } from '../../models/language';
 
 export default class SelectGroup {
   oninit() {
@@ -20,20 +22,20 @@ export default class SelectGroup {
       if (typeof option === 'object') {
         return option;
       }
-      return { value: option, text: option };
+      return { value: option, label: option };
     });
 
     switch (vnode.attrs.type) {
       case 'buttons': {
         if (args.multipleSelect) {
           return m('div', { class: vnode.attrs.classes }, [
-            m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title),
+            m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)),
             m(
               'div',
               options.map(option =>
                 m(inputGroup, {
                   name: vnode.attrs.name,
-                  title: option.text,
+                  title: i18n(option.label),
                   value: option.value,
                   onchange: e => {
                     if (e.target.checked) {
@@ -63,59 +65,55 @@ export default class SelectGroup {
             options.map(option =>
               m(inputGroup, {
                 name: vnode.attrs.name,
-                title: option.text,
+                title: i18n(option.label),
                 value: option.value,
                 onchange: vnode.attrs.onchange,
                 args: { type: 'radio' },
               })
             )
           ),
-          m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title),
+          m(`label[for=${vnode.attrs.name}]`, vnode.attrs.name),
         ]);
       }
       case 'select':
       default: {
         if (args.multipleSelect) {
           return m('div', { class: vnode.attrs.classes }, [
-            m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title),
-            m(
-              `select[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`,
-              {
-                args,
-                onchange: e => {
-                  const value = [];
-                  let opt;
-                  for (let i = 0; i < e.target.options.length; i += 1) {
-                    opt = e.target.options[i];
-                    if (opt.selected) {
-                      value.push(opt);
-                    }
+            m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)),
+            m(Dropdown, {
+              ...args,
+              onchange: e => {
+                const value = [];
+                let opt;
+                for (let i = 0; i < e.target.options.length; i += 1) {
+                  opt = e.target.options[i];
+                  if (opt.selected) {
+                    value.push(opt);
                   }
-                  vnode.attrs.onchange({ target: { name: e.target.name, value } });
-                },
-                oninput: e => {
-                  const value = [];
-                  let opt;
-                  for (let i = 0; i < e.target.options.length; i += 1) {
-                    opt = e.target.options[i];
-                    if (opt.selected) {
-                      value.push(opt);
-                    }
+                }
+                vnode.attrs.onchange({ target: { name: e.target.name, value } });
+              },
+              oninput: e => {
+                const value = [];
+                let opt;
+                for (let i = 0; i < e.target.options.length; i += 1) {
+                  opt = e.target.options[i];
+                  if (opt.selected) {
+                    value.push(opt);
                   }
-                  vnode.attrs.oninput({ target: { name: e.target.name, value } });
-                },
+                }
+                vnode.attrs.oninput({ target: { name: e.target.name, value } });
               },
-              options.map(option => m('option', { value: option.value }, option.text))
-            ),
+              data: options,
+            }),
           ]);
         }
         return m('div', { class: vnode.attrs.classes }, [
-          m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title),
-          m(
-            `select[name=${vnode.attrs.name}][id=${vnode.attrs.name}]`,
-            args,
-            options.map(option => m('option', { value: option.value }, option.text))
-          ),
+          m(`label[for=${vnode.attrs.name}]`, i18n(vnode.attrs.name)),
+          m(Dropdown, {
+            ...args,
+            data: options,
+          }),
         ]);
       }
     }
-- 
GitLab