SelectInput does not work when source points to array item's attribute; SyntaxError: Failed to execute 'querySelector' on 'Document': '#title[0].txt-label' is not a valid selector.

What you were expecting: The latest react-admin release (v.3.5.1) broke SelectInput when source points to child attributes of an array. Prior to this update, everything worked fine.

Note:

• source=‘title[0].txt’ does not work while source=‘title’ does
• I change SelectInput to TextInput, everything works just fine.

export const PostEdit = (props) => (
  <Edit title={<PostTitle />} {...props}>
    <SimpleForm>
      <TextInput disabled source='id' />
      <SelectInput source='title[0].txt' choices={[{ id: '1', name: 'default' }]} />
    </SimpleForm>
  </Edit>
);
);

What happened instead:

Steps to reproduce: Go to posts, and click edit.

Related code: https://github.com/panfiva/sample_error/blob/96f2ce195ad09da8312305a0b325460a191e90d9/src/posts.js#L53

Other information:

Environment Chrome 81.0.4044.129

{ “name”: “react-admin-error”, “version”: “0.1.1”, “dependencies”: { “@material-ui/core”: “^4.9.14”, “axios”: “^0.19.2”, “prop-types”: “^15.7.2”, “ra-data-json-server”: “^3.5.1”, “react”: “^16.13.1”, “react-admin”: “^3.5.1”, “react-dom”: “^16.13.1”, “react-final-form”: “^6.4.0”, “react-scripts”: “^3.4.1”, “typescript”: “^3.9.2” }, “scripts”: { “start”: “react-scripts start”, “build”: “react-scripts build”, “test”: “react-scripts test”, “eject”: “react-scripts eject” }, “eslintConfig”: { “extends”: “react-app” }, “browserslist”: { “production”: [ “>0.2%”, “not dead”, “not ie <= 10”, “not op_mini all” ], “development”: [ “last 1 chrome version”, “last 1 firefox version”, “last 1 safari version” ] } }

[fzaninotto]

@paulito415 The react-admin team looks at bugs here, and sometimes helps with troubleshooting on StackOverflow. But the troubleshooting work is mostly delegated to the community. Cross-posting in SO and here will have the inverse effect of what you expect: with double the noise, and a disregard for our issue template, we’ll just silence the notifications coming from you.

If you have no reply on SO, be patient. If you’re in a hurry, contact Marmelab for Professional Services.

[paulito415]

So I did a quick grep under node_modules for querySelector (and other filters) and found:

node_modules/react-admin/node_modules/@material-ui/core/esm/Select/SelectInput.js:112:      var label = ownerDocument(displayNode).querySelector("#".concat(labelId));
node_modules/react-admin/node_modules/@material-ui/core/Select/SelectInput.js:138:      var label = (0, _ownerDocument.default)(displayNode).querySelector("#".concat(labelId));
node_modules/react-admin/node_modules/@material-ui/core/es/Select/SelectInput.js:90:      const label = ownerDocument(displayNode).querySelector(`#${labelId}`);

And in all of them the incorrect element lookup using querySelector was used. So I chased down the material-ui issue 21045, and from there found the pull-request that fixed it (on their side) and looked at the diffs, to find that the fix was just to replace the usage of querySelector with getElementById.

I wasn’t sure which one of the 3 I listed above I should modify but basically I modified all 3 with the fix and lo and behold, my problem was fixed! I guess it may take some time for their changes in material-ui to trickle down to react-admin. In the meantime I have added an extra step in my build to patch these files every time.