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

addLabel not working in FormDataConsumer #4571

Closed
akmetin opened this issue Mar 23, 2020 · 1 comment · Fixed by #4598
Closed

addLabel not working in FormDataConsumer #4571

akmetin opened this issue Mar 23, 2020 · 1 comment · Fixed by #4598
Assignees

Comments

@akmetin
Copy link

akmetin commented Mar 23, 2020

What you were expecting:
addLabel should work with FormDataConsumer.

What happened instead:
I have using outlined inputs with labels on my project. And FormDataConsumer ignores addLabel prop.

Steps to reproduce:
Example usage in CommentCreate component:
https://codesandbox.io/s/staging-sunset-cthz9

Possible Solution:
I have created FormGroup componet and covered formData with FormGroup

formData.post_id !== "" && (
            <FormGroup>
              <DateInput
                source="created_at"
                defaultValue={now}
                addLabel={true}
              />
              <TextInput
                source="body"
                fullWidth={true}
                multiline={true}
                addLabel={true}
              />
            </FormGroup>
          )`

FormGroup Component:

import React, { Children } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { makeStyles } from '@material-ui/core/styles';

import { FormInput } from 'react-admin';

const useStyles = makeStyles(theme => ({
    input: { maxWidth: theme.spacing(64), minWidth: theme.spacing(48) },
}));

export const FormGroup = ({ children, classes: classesOverride, ...rest }) => {
    const classes = useStyles({ classes: classesOverride });
    return (
        <div className={classnames('ra-form-gruop', classes)}>
            {Children.map(children, input => (
                <FormInput input={input} {...rest} />
            ))}
        </div>
    );
};

FormGroup.propTypes = {
    className: PropTypes.string,
    classes: PropTypes.object,
};

FormGroup.displayName = 'FormGroup';

export default FormGroup;

Environment

  • React-admin version: 3.0+
  • React version: 16.3.0
  • Browser: Any
  • Stack trace (in case of a JS error): No error
fzaninotto added a commit that referenced this issue Mar 29, 2020
@fzaninotto
Copy link
Member

The documentation is misleading. addLabel only works when a component is used as child of <SimpleForm>, <FormTab>, <SimpleShowLayout>, or <Tab>. In other cases, you have to decorate the field with <Labeled> yourself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants