diff --git a/superset/assets/javascripts/components/CopyToClipboard.jsx b/superset/assets/javascripts/components/CopyToClipboard.jsx index d00347d9989..7288b0d5564 100644 --- a/superset/assets/javascripts/components/CopyToClipboard.jsx +++ b/superset/assets/javascripts/components/CopyToClipboard.jsx @@ -52,6 +52,10 @@ export default class CopyToClipboard extends React.Component { } copyToClipboard(textToCopy) { + const selection = document.getSelection(); + selection.removeAllRanges(); + document.activeElement.blur(); + const range = document.createRange(); const textArea = document.createElement('textarea'); textArea.style.position = 'fixed'; @@ -59,7 +63,8 @@ export default class CopyToClipboard extends React.Component { textArea.value = textToCopy; document.body.appendChild(textArea); - textArea.select(); + range.selectNode(textArea); + selection.addRange(range); try { if (!document.execCommand('copy')) { throw new Error(t('Not successful')); @@ -69,6 +74,11 @@ export default class CopyToClipboard extends React.Component { } document.body.removeChild(textArea); + if (selection.removeRange) { + selection.removeRange(range); + } else { + selection.removeAllRanges(); + } this.setState({ hasCopied: true }); this.props.onCopyEnd(); diff --git a/superset/assets/javascripts/explore/components/DisplayQueryButton.jsx b/superset/assets/javascripts/explore/components/DisplayQueryButton.jsx index ec5cdcd0635..06a0164117a 100644 --- a/superset/assets/javascripts/explore/components/DisplayQueryButton.jsx +++ b/superset/assets/javascripts/explore/components/DisplayQueryButton.jsx @@ -4,8 +4,10 @@ import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/di import html from 'react-syntax-highlighter/dist/languages/htmlbars'; import markdown from 'react-syntax-highlighter/dist/languages/markdown'; import github from 'react-syntax-highlighter/dist/styles/github'; +import CopyToClipboard from './../../components/CopyToClipboard'; import ModalTrigger from './../../components/ModalTrigger'; +import Button from '../../components/Button'; import { t } from '../../locales'; registerLanguage('markdown', markdown); @@ -85,9 +87,21 @@ export default class DisplayQueryButton extends React.PureComponent { return
{this.state.error}
; } else if (this.state.query) { return ( - - {this.state.query} - ); +
+ + + + } + /> + + {this.state.query} + +
+ ); } return null; }