Label shown only on focus

General
1

Is there an easy way to override this material renderer’s property, so that all the input labels are shown?

[original thread by Lukas Freimonas]

2

@lukas-frm(lukas-frm) could you add some screenshots? I don’t really understand what you mean.

3

[Lukas Freimonas]

4

[Lukas Freimonas]

In this case, I’d like all the inputs fields to have their own visible label, like ‘due date’ has

5

[Lukas Freimonas]

these are simple ‘string’ type inputs

6

[Lukas Freimonas]

adding “label” in schema does not work

7

this is weird, by default the label is shown inside the input if the value is empty, otherwise it is shown above the control, can you share your schema and uischema?

8

[Lukas Freimonas]

Short version:

exports.schema = {
  type: "object",
  properties: {
    _id1: {
      type: "string",
    },
     _id2: {
      type: "string",
    },
  },
};
exports.uischema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/_id1",
    },
       {
      type: "Control",
      scope: "#/properties/_id2",
    },
  ],
};
9

interesting, could you test using properties without an underscore? If it works, could you create a bug that JSONForms doesn’t create labels for properties which start with an underscore?
If you need to use underscores you can set the label in the uischema:

uischema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/_id1",
     label: "Foo"
    },
       {
      type: "Control",
      scope: "#/properties/_id2",
     label: "Bar"
    },
  ],
}
10

[Lukas Freimonas]

11

[Lukas Freimonas]

this is what it looks like, even without underscores

12

[Lukas Freimonas]

Any ideas? :slight_smile: Forms are working flawlessly, except for this

13

[Lukas Freimonas]

Main component looks like this:

import React, { Component } from "react";
import { JsonForms } from "@jsonforms/react";
import {
  materialRenderers,
  materialCells,
} from "@jsonforms/material-renderers";
export class Form extends Component {
  render() {
    return (
      <div>
        <JsonForms
          schema={this.currentInputSchema.schema}
          uischema={this.currentInputSchema.uischema}
          renderers={materialRenderers}
          cells={materialCells}
          onChange={({ errors, data }) =>
            this.setState({ data, errors }, () => {
              console.log(this.state.data);
            })
          }
        />
      </div>
    );
  }
}

export default Form;
14

hmm, this is weird, I never saw this strange behavior before, do you have some custom css?
also updating the state.data on every change and setting it back as the form data looks weird

15

[Lukas Freimonas]

yeah, that’s just for testing :slight_smile:

16

can you provide an example public github repo as a reproducer?

17

[Lukas Freimonas]

Unfortunately no, the code belongs to my company

18

[Lukas Freimonas]

Label changes from:
Parent Msg
To:
Parent Msg

19

[Lukas Freimonas]

MuiInputLabel-shrink withStyles(ForwardRef(InputLabel))-shrink-6 Mui-focused Mui-focused classes get added

20

[Lukas Freimonas]

and data-shrink=“true” is set to true