From 0cc705d71b5fc3317618363eae8f9041e6df33c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 16 Jul 2018 18:10:57 -0300
Subject: [PATCH] Working

---
 src/core/client/stream/components/Comment/Comment.tsx   | 4 ++--
 src/core/client/stream/components/PermalinkPopover.tsx  | 8 ++++----
 src/core/client/ui/components/Attachment/Attachment.tsx | 7 ++++---
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 0765a2a79..6d4065126 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -27,8 +27,8 @@ const Comment: StatelessComponent<CommentProps> = props => {
       <Typography>{props.body}</Typography>
       <div>
         <Popover body={<PermalinkPopover commentId={props.id} />}>
-          {({ toggleShow }) => (
-            <button onClick={toggleShow}>
+          {({ toggleShow, ref }) => (
+            <button onClick={toggleShow} style={{ color: "red" }} ref={ref}>
               <Localized id="comments-permalink-share">
                 <span>Share</span>
               </Localized>
diff --git a/src/core/client/stream/components/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkPopover.tsx
index 6a85ffcad..a4d8feca2 100644
--- a/src/core/client/stream/components/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkPopover.tsx
@@ -1,13 +1,14 @@
 import { Localized } from "fluent-react/compat";
 import React, { CSSProperties } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
+import { RefHandler } from "react-popper";
 import { Button, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
   commentId: string;
-  ref?: any;
   style?: CSSProperties;
+  innerRef?: RefHandler;
 }
 
 interface State {
@@ -33,11 +34,10 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { commentId, ref, style } = this.props;
+    const { commentId, style, innerRef } = this.props;
     const { copied } = this.state;
-
     return (
-      <div className={styles.root} ref={ref} style={style}>
+      <div className={styles.root} style={style} ref={innerRef}>
         <TextField defaultValue={commentId} className={styles.textField} />
         <CopyToClipboard text={commentId} onCopy={this.onCopy}>
           <Button primary>
diff --git a/src/core/client/ui/components/Attachment/Attachment.tsx b/src/core/client/ui/components/Attachment/Attachment.tsx
index 2a44bcac1..549787707 100644
--- a/src/core/client/ui/components/Attachment/Attachment.tsx
+++ b/src/core/client/ui/components/Attachment/Attachment.tsx
@@ -30,6 +30,7 @@ interface InnerProps {
 
 interface Props {
   ref: any;
+  style: CSSProperties;
 }
 
 class Attachment extends React.Component<InnerProps> {
@@ -44,11 +45,11 @@ class Attachment extends React.Component<InnerProps> {
           eventsEnabled
           positionFixed={false}
         >
-          {({ ref, style }) =>
+          {(props: Props) =>
             body
               ? React.cloneElement(body, {
-                  ref,
-                  style,
+                  innerRef: props.ref,
+                  style: props.style,
                 })
               : null
           }