Merge pull request #1000 from navikt/bugfix/hide-label-fix

Ignore dataGridLabel for ReactComponents, just use hideLabel instead.

Author: lotorvik

packages/shared-components/src/formio/components/base/BaseComponent.tsx

@@ -23,7 +23,6 @@ class BaseComponent extends FormioReactComponent {
   static schema(values) {
     return Field.schema({
       fieldSize: 'input--xxl',
-      dataGridLabel: true,
       validateOn: 'blur',
       ...values,
     });
@@ -50,7 +49,7 @@ class BaseComponent extends FormioReactComponent {
   }
 
   getHideLabel() {
-    return this.labelIsHidden();
+    return this.component?.hideLabel ?? false;
   }
 
   /**

packages/shared-components/src/formio/components/base/editForm/shared/editFormValuesGrid.ts

@@ -12,7 +12,7 @@ const editFormValuesGrid = (): Component => ({
       key: 'label',
       input: true,
       type: 'textfield',
-      dataGridLabel: false,
+      hideLabel: true,
       validate: {
         required: true,
       },
@@ -22,7 +22,7 @@ const editFormValuesGrid = (): Component => ({
       key: 'value',
       input: true,
       type: 'textfield',
-      dataGridLabel: false,
+      hideLabel: true,
       allowCalculateOverride: true,
       calculateValue: 'value = _.camelCase(row.label);',
     },

packages/shared-components/src/formio/template/templates/navdesign/datagrid/form.ejs

@@ -4,13 +4,12 @@
       {{ ctx.component.hover ? 'table-hover' : ''}}
       {{ ctx.component.condensed ? 'table-sm' : ''}}
       " {% if (ctx.component.layoutFixed) { %}style="table-layout: fixed;"{% } %}>
-    {% if (ctx.hasHeader) { %}
       <thead>
         <tr>
           {% if (ctx.component.reorder) { %}<th></th>{% } %}
           {% ctx.columns.forEach(function(col) { %}
             <th class="{{col.validate && col.validate.required ? 'field-required' : ''}}">
-              {{ col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) }}
+              {{ ctx.t(col.label || col.title, { _userInput: true }) }}
               {% if (col.tooltip) { %} <i ref="tooltip" data-title="{{col.tooltip}}" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{col.tooltip}}"></i>{% } %}
             </th>
           {% }) %}
@@ -33,7 +32,6 @@
           {% } %}
         </tr>
       </thead>
-    {% } %}
     <tbody ref="{{ctx.datagridKey}}-tbody" data-key="{{ctx.datagridKey}}">
       {% ctx.rows.forEach(function(row, index) { %}
         {% if (ctx.hasGroups && ctx.groups[index]) { %}