diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js index 1f3b771286cd3f95c331295e9691277914e11842..fd9e6441c4bf4b0ecc52d8d9f3eb3e38b72b92c0 100644 --- a/src/Components/ShareModal.js +++ b/src/Components/ShareModal.js @@ -33,11 +33,14 @@ import LinkIcon from '../img/link_icon.svg' import CloseModalButton from './CloseModalButton.js' export default function ReportModal (props) { - const refContainer = useRef(props.link); - - function copyToClipboard(e) { - let copyText = document.getElementById('p-text') - console.log(copyText) + const textAreaRef = useRef(props.link); + + const copyToClipboard = (e) => { + textAreaRef.current.select(); + document.execCommand('copy'); + // This is just personal preference. + // I prefer to not show the whole text area selected. + e.target.focus(); }; return ( @@ -97,10 +100,14 @@ export default function ReportModal (props) { {/*Get shareable link*/} <Grid item xs={4}> + { + document.queryCommandSupported('copy') && <ShareButton onClick={copyToClipboard}> <img src={LinkIcon} alt="link-icon"/> - <p id="p-text" value={props.link}>COPIAR LINK</p> + <p>COPIAR LINK</p> + <textarea ref={textAreaRef} value={props.link} readOnly style={{height: "0", position: "absolute",zIndex: "-1"}}/> </ShareButton> + } </Grid> </Grid> </ShareInfo>