Merge pull request #2457 from marmelab/referencefield-rowclick

[RFR] Fix ReferenceField in Datagrids using rowClick
marmelab · Oct 22, 2018 · 8c5fc55 · 8c5fc55
2 parents 18fcad8 + a54acf0
commit 8c5fc55
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/ra-ui-materialui/src/Link.js b/packages/ra-ui-materialui/src/Link.js
@@ -13,8 +13,8 @@ const styles = theme => ({
 /**
  * @deprecated Use react-router-dom's Link instead
  */
-const Link = ({ to, children, className, classes }) => (
-    <RRLink to={to} className={classNames(classes.link, className)}>
+const Link = ({ to, children, className, classes, ...rest }) => (
+    <RRLink to={to} className={classNames(classes.link, className)} {...rest}>
         {children}
     </RRLink>
 );

diff --git a/packages/ra-ui-materialui/src/field/ReferenceField.js b/packages/ra-ui-materialui/src/field/ReferenceField.js
@@ -14,6 +14,9 @@ const styles = theme => ({
     },
 });
 
+// useful to prevent click bubbling in a datagrid with rowClick
+const stopPropagation = e => e.stopPropagation();
+
 export const ReferenceFieldView = ({
     allowEmpty,
     basePath,
@@ -36,7 +39,11 @@ export const ReferenceFieldView = ({
 
     if (resourceLinkPath) {
         return (
-            <Link to={resourceLinkPath} className={className}>
+            <Link
+                to={resourceLinkPath}
+                className={className}
+                onClick={stopPropagation}
+            >
                 {React.cloneElement(children, {
                     className: classnames(
                         children.props.className,

diff --git a/packages/ra-ui-materialui/src/list/SingleFieldList.js b/packages/ra-ui-materialui/src/list/SingleFieldList.js
@@ -10,6 +10,9 @@ const styles = {
     root: { display: 'flex', flexWrap: 'wrap' },
 };
 
+// useful to prevent click bubbling in a datagrid with rowClick
+const stopPropagation = e => e.stopPropagation();
+
 const sanitizeRestProps = ({ currentSort, setSort, isLoading, ...props }) =>
     props;
 
@@ -22,7 +25,7 @@ const sanitizeRestProps = ({ currentSort, setSort, isLoading, ...props }) =>
  *         <ChipField source="title" />
  *     </SingleFieldList>
  * </ReferenceManyField>
- * 
+ *
  * By default, it includes a link to the <Edit> page of the related record
  * (`/books/:id` in the previous example).
  *
@@ -79,6 +82,7 @@ export class SingleFieldList extends Component {
                                 className={classnames(classes.link, className)}
                                 key={id}
                                 to={resourceLinkPath}
+                                onClick={stopPropagation}
                             >
                                 {cloneElement(children, {
                                     record: data[id],