Skip to content

CheckboxGroupInput in Form : value.find is not a function error #2527

Description

@pichichi40

What you were expecting:
When CheckboxGroupInput "source" attribute value is not in data model

What happened instead:
TypeError
value.find is not a function

Steps to reproduce:
data model :

export default {
  posts: [
    {
      id: 1,
      title:
        "Accusantium qui nihil voluptatum quia voluptas maxime ab similique",
      notifications: [12, 31, 42]
    }
  ]
};

component :

export const PostEdit = props => (
  <Edit title={<PostTitle />} {...props}>
    <TabbedForm defaultValue={{ average_note: 0 }}>
      <FormTab label="post.form.summary">
        <DisabledInput source="id" />
        <TextInput source="title" />

        <CheckboxGroupInput
          source="notifications"
          choices={[
            { id: 12, name: "Ray Hakt" },
            { id: 31, name: "Ann Gullar" },
            { id: 42, name: "Sean Phonee" }
          ]}
        />
        <CheckboxGroupInput
          source="notifications2"
          choices={[
            { id: 12, name: "Ray Hakt" },
            { id: 31, name: "Ann Gullar" },
            { id: 42, name: "Sean Phonee" }
          ]}
        />
      </FormTab>
    </TabbedForm>
  </Edit>
);

Related code:
CodeSandbox (https://codesandbox.io/s/4wz63x1jmx)

Temporarily fixed with the following code in node_modules\ra-ui-materialui\esm\input\CheckboxGroupInput.js :
line 34 add :
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';

line 138 (approximately) replace onChange(value.concat([newValue])); :

_this.handleCheck = function (event, isChecked) {
            var _a = _this.props.input, value = _a.value, onChange = _a.onChange;
            var newValue;
            try {
                // try to convert string value to number, e.g. '123'
                newValue = JSON.parse(event.target.value);
            }
            catch (e) {
                // impossible to convert value, e.g. 'abc'
                newValue = event.target.value;
            }
            if (isChecked) {
              //FIXED HERE
              onChange([].concat(_toConsumableArray(value), [newValue]));
              //onChange(value.concat([newValue]));
            }
            else {
                onChange(value.filter(function (v) { return v != newValue; }));
            }
        };

Environment

  • React-admin version: 2.4.2
  • React version: 16.3.2, 16.4.2 (no tests on other versions)

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions