PLT-4493 Fixed copy button in Get Link Modal on Safari 10 (#4786)

* Fixed copy button in Get Link Modal for Safari 10

* Shortened 'link copied' label on GetLinkModal

2 files changed, 9 insertions, 24 deletions

diff --git a/webapp/components/get_link_modal.jsx b/webapp/components/get_link_modal.jsx
index 8d4cbbc1c..f33b7caae 100644
--- a/webapp/components/get_link_modal.jsx
+++ b/webapp/components/get_link_modal.jsx
@@ -1,14 +1,11 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
-import ReactDOM from 'react-dom';
-import {FormattedMessage} from 'react-intl';
+import React from 'react';
 
+import {FormattedMessage} from 'react-intl';
 import {Modal} from 'react-bootstrap';
 
-import React from 'react';
-
 export default class GetLinkModal extends React.Component {
     constructor(props) {
         super(props);
@@ -16,37 +13,25 @@ export default class GetLinkModal extends React.Component {
         this.onHide = this.onHide.bind(this);
 
         this.copyLink = this.copyLink.bind(this);
-        this.selectLinkOnClick = this.selectLinkOnClick.bind(this);
 
         this.state = {
             copiedLink: false
         };
     }
 
-    componntWillUnmount() {
-        $(this.refs.textarea).off('click');
-    }
-
     onHide() {
         this.setState({copiedLink: false});
 
         this.props.onHide();
     }
 
-    selectLinkOnClick() {
-        $(this.refs.textarea).on('click', function selectLinkOnClick() {
-            $(this).select();
-            this.setSelectionRange(0, this.value.length);
-        });
-    }
-
     copyLink() {
-        var copyTextarea = $(ReactDOM.findDOMNode(this.refs.textarea));
-        copyTextarea.select();
+        const textarea = this.refs.textarea;
+        textarea.focus();
+        textarea.setSelectionRange(0, this.props.link.length);
 
         try {
-            var successful = document.execCommand('copy');
-            if (successful) {
+            if (document.execCommand('copy')) {
                 this.setState({copiedLink: true});
             } else {
                 this.setState({copiedLink: false});
@@ -90,6 +75,7 @@ export default class GetLinkModal extends React.Component {
                 className='form-control no-resize min-height'
                 ref='textarea'
                 value={this.props.link}
+                onClick={this.copyLink}
                 readOnly={true}
             />
         );
@@ -101,7 +87,7 @@ export default class GetLinkModal extends React.Component {
                     <i className='fa fa-check'/>
                     <FormattedMessage
                         id='get_link.clipboard'
-                        defaultMessage=' Link copied to clipboard.'
+                        defaultMessage=' Link copied'
                     />
                 </p>
             );
@@ -111,7 +97,6 @@ export default class GetLinkModal extends React.Component {
             <Modal
                 show={this.props.show}
                 onHide={this.onHide}
-                onEntered={this.selectLinkOnClick}
             >
                 <Modal.Header closeButton={true}>
                     <h4 className='modal-title'>{this.props.title}</h4>
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 896875bda..dda6cedd0 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1301,7 +1301,7 @@
   "get_app.iosHeader": "Mattermost works best if you switch to our iPhone app",
   "get_app.mattermostInc": "Mattermost, Inc",
   "get_app.openMattermost": "Open Mattermost",
-  "get_link.clipboard": " Link copied to clipboard.",
+  "get_link.clipboard": " Link copied",
   "get_link.close": "Close",
   "get_link.copy": "Copy Link",
   "get_post_link_modal.help": "The link below allows authorized users to see your post.",