Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MUI 5 Input border is interrupting with label #3578

Closed
3 of 4 tasks
Fremen1990 opened this issue Apr 5, 2023 · 0 comments · Fixed by #3583
Closed
3 of 4 tasks

MUI 5 Input border is interrupting with label #3578

Fremen1990 opened this issue Apr 5, 2023 · 0 comments · Fixed by #3583
Labels
bug needs triage Initial label given, to be assigned correct labels and assigned

Comments

@Fremen1990
Copy link

Fremen1990 commented Apr 5, 2023

Prerequisites

What theme are you using?

material-ui

Version

5.4

Current Behavior

Input with material-ui-5 is interrupting with label, it happen only on the first input, every other input have proper border with label.

Please see screenshot below:

image

image

Expected Behavior

Standard MUI 5 input for all input fields

Steps To Reproduce

  • Open Playground:
    https://rjsf.netlify.app/

  • Paste JsonSchema:
    {
    "title": "Form with additional properties.",
    "description": "Labels for 'key' of additional properties are not displayed properly in material-ui-5 theme.",
    "type": "object",
    "additionalProperties": {
    "type": "string"
    },
    "properties": {
    "withLabelOk": {
    "type": "string",
    "title": "Label OK"
    }
    }
    }

  • click on first input

Environment

In the playground as well as locally in the development environment

Anything else?

No response

@Fremen1990 Fremen1990 added bug needs triage Initial label given, to be assigned correct labels and assigned labels Apr 5, 2023
heath-freenome added a commit to heath-freenome/react-jsonschema-form that referenced this issue Apr 5, 2023
Fixes rjsf-team#3576 and rjsf-team#3579 by only passing `templates` with non-`undefined` values
Fixes rjsf-team#3578 by using `TextField` to render the label key input value

- Updated `@rjsf/material-ui` and `@rjsf/mui` to use the `TextField` as the input for the label key value rather than attempting to cobble one togther
  - Updated the snapshots accordingly
- Updated the `Playground` component to only pass `templates` with values that aren't undefined to the main `Form`
- Updated the `CHANGELOG.md` accordingly
heath-freenome added a commit that referenced this issue Apr 5, 2023
Fixes #3576 and #3579 by only passing `templates` with non-`undefined` values
Fixes #3578 by using `TextField` to render the label key input value

- Updated `@rjsf/material-ui` and `@rjsf/mui` to use the `TextField` as the input for the label key value rather than attempting to cobble one togther
  - Updated the snapshots accordingly
- Updated the `Playground` component to only pass `templates` with values that aren't undefined to the main `Form`
- Updated the `CHANGELOG.md` accordingly
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug needs triage Initial label given, to be assigned correct labels and assigned
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant