{"action":"closed","issue":{"url":"https://api.github.com/repos/nihey/react-clipboard.js/issues/22","repository_url":"https://api.github.com/repos/nihey/react-clipboard.js","labels_url":"https://api.github.com/repos/nihey/react-clipboard.js/issues/22/labels{/name}","comments_url":"https://api.github.com/repos/nihey/react-clipboard.js/issues/22/comments","events_url":"https://api.github.com/repos/nihey/react-clipboard.js/issues/22/events","html_url":"https://github.com/nihey/react-clipboard.js/issues/22","id":152717973,"number":22,"title":"Allow option to instantiate clipboard.js by passing in HTMLElement rather than the selector String.","user":{"login":"jseminck","id":9586897,"avatar_url":"https://avatars.githubusercontent.com/u/9586897?v=3","gravatar_id":"","url":"https://api.github.com/users/jseminck","html_url":"https://github.com/jseminck","followers_url":"https://api.github.com/users/jseminck/followers","following_url":"https://api.github.com/users/jseminck/following{/other_user}","gists_url":"https://api.github.com/users/jseminck/gists{/gist_id}","starred_url":"https://api.github.com/users/jseminck/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jseminck/subscriptions","organizations_url":"https://api.github.com/users/jseminck/orgs","repos_url":"https://api.github.com/users/jseminck/repos","events_url":"https://api.github.com/users/jseminck/events{/privacy}","received_events_url":"https://api.github.com/users/jseminck/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-05-03T07:48:34Z","updated_at":"2016-05-04T00:01:49Z","closed_at":"2016-05-04T00:01:49Z","body":"Clipboard.js supports an option now where we can pass in an HTMLElement in the constructor, see:\r\n\r\nhttps://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L19\r\n\r\nThis is useful, because in some situations we want to stopPropagation on the copy link, but in the current way of doing this it results that the event is not propagated to the clipboard.js package. \r\n\r\nThere are several issues on clipboard.js github page regarding stopPropagation, where the author suggest to use this approach:\r\n- https://github.com/zenorocha/clipboard.js/issues/138\r\n- https://github.com/zenorocha/clipboard.js/issues/91\r\n\r\nI have tested with this component, and instantiating Clipboard by passing the DOMNode fixes my problem:\r\n```js\r\n        this.clipboard = new Clipboard(ReactDOM.findDOMNode(this), options);\r\n```\r\n\r\n*Edit-2*: A better way seems to be to use this.refs instead. This also works fine. See my fork as an experiment.\r\n\r\nHowever, would be nice if the component was updated with a property to use string instantiation or HTMLElement instantiation.\r\n\r\n*Edit-1*: Perhaps this should even be the official implementation? The old clipboard.js API that takes a selector was pretty weird and this plugin is also doing all sorts of magic to work around that, by using a counter and creating a custom id ..."}}