question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When using the Semantic UI theme, labels disappear when specifying format or enum

See original GitHub issue

Prerequisites

Description

When specifying a format, the field labels are not displayed

Steps to Reproduce

  1. import Form from "@rjsf/semantic-ui";
  2. Create a JSONSchema that specifies formats (such as email and date)
const schema = {
  title: "Label Bug Demo",
  type: "object",
  required: ["name", "originalContractAmount", "applicationDate", "periodTo"],
  properties: {
    email: {
      type: "string",
      title: "Email",
      format: "email"
    },
    birthday: {
      type: "string",
      title: "Birthday",
      format: "date"
    }
  }
};
  1. Render the form
<Form schema={schema} />

See https://codesandbox.io/s/react-jsonschema-form-demo-grtcz?file=/src/App.tsx for a live example

Expected behavior

Expect to see the form render with labels containing the specified titles.

Actual behavior

The fields render without any labels.

Screen Shot 2020-07-23 at 10 05 06 PM

Version

"@rjsf/core": "^2.2.1",
"@rjsf/semantic-ui": "^2.2.1",

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
GeekLadcommented, Jul 25, 2020

I came up with a simple work around with this field template (in TypeScript):

import React from 'react';
import { FieldTemplateProps } from '@rjsf/core';
import { Form } from 'semantic-ui-react';

export const FieldTemplate: React.FC<FieldTemplateProps> = (props: FieldTemplateProps) => {
  // Return with the label, if it's in a situation where it would be missing
  if (
    props.schema.format
    || props.schema.enum
  ) {
    return (
      <Form.Field required={props.required}>
        <label>{props.schema.title}</label>
        {props.children}
      </Form.Field>
    );
  }

  // Return the field as-is in other situations
  return props.children;
};
0reactions
jjarcikcommented, May 4, 2021

@jjarcik pull request has not been merged in ? 2225

probably not, or the title was not fixed. GeekLad’s work around works, but…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Semantic-Org/Semantic-UI-React - Gitter
I've gone down a different route meanwhile - using a Dimmer and a Segment group ... https://react.semantic-ui.com/collections/form/#states-field-error-label.
Read more >
Theming | Semantic UI
The default theme. config will have all component values set to default. To choose a theme, simply change a component to match the...
Read more >
Semantic-UI/RELEASE-NOTES.md at master - GitHub
Segment - Added new ui placeholder segment used to reserve space for UI when content is missing or empty.
Read more >
react-jsonschema-form-semanticui-fixed - npm package - Snyk
A simple React component capable of building HTML forms out of a JSON schema using React Semantic UI. For more information about how...
Read more >
Semantic UI Modal failed to get form data - Stack Overflow
You aren't showing everything, but undisplayed (visible:none) fields are not posted. When the "approve" (ok) button of the dialog is clicked, it may...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found