How to select text to copy without triggering click event in reactjs

Question

I am using react-table. I have defined onRowClick() function for a column. Here select text should highlight the text and clicking have to redirect to another page. Now when I try to select the text, its getting redirected. How to select text without triggering click event?

Following is my onRowClick function:

onRowClick = (state, rowInfo, columnInfo) => {
  return {
    onClick: (e, handleOriginal) => {
      if (columnInfo.id) {
        this.props.history.push(`/downloads/${rowInfo.original.id}`);
      } else if (handleOriginal) {
        handleOriginal();
      }
    }
  };
}

The following is my react-table component:

<ReactTable
  manual
  getTdProps = {this.onRowClick}
  data = {results}
  onFetchData = {this.onFetchData}
  sortable = {false}
  showPagination = {false}
  noDataText = 'no data found'
  columns = {[
   {
     Header: 'Id',
     maxWidth: 50,
     accessor: "id",
     Cell: (props) => <span className="btn-link pointer">{props.value} </span>
   },
   {
     Header: 'Processed on',
     maxWidth: 165,
     accessor: "created_at",
     Cell: (props) => <span> {this.getDateTime(props.value)} </span>
   }
  ]
/>

Clicking on id column should redirect to the details page. Selecting text should select the id text.

Hi, as you have used here onClick event it'll be redirected so you can't do anything in that but if you change the event onClick to onDoubleClick then if you click two times then only it'll be redirected and not in a single click. Hope this might be helpful for you. — AddWeb Solution Pvt Ltd, Jun 28 '19 at 06:46
Possible duplicate of [Prevent onClick event when selecting text](https://stackoverflow.com/questions/31982407/prevent-onclick-event-when-selecting-text) — skyboyer, Jun 28 '19 at 07:09

Triyugi Narayan Mani · Accepted Answer · 2019-06-28T07:13:14.337

I think onclick cannot be prevented but your desired result can be obtained by using Window.getSelection() method.

The Window.getSelection() method returns a Selection object representing the range of text selected by the user or the current position of the caret.

By using this method you can get the selected text and then you can calculate its length as:

window.getSelection().toString()

And then you can modify your onRowClick method as given below:

onRowClick = (state, rowInfo, columnInfo) => {
    return {
        onClick: (e, handleOriginal) => {
            let selection = window.getSelection().toString();
            if(selection.length <= 0) {
                if (columnInfo.id && selection.length > 0) {
                    console.log("columnInfo.id", columnInfo.id);
                    this.props.history.push(`/downloads/${rowInfo.original.id}`);
                } else if (handleOriginal) {
                    handleOriginal();
                    console.log("columnInfo.id", "nothing");
                }
            }
        }
    };
};

I have created a working demo.

How to select text to copy without triggering click event in reactjs

1 Answers1