onMouseUp not working with span tag in reactjs?

October 20, 2022

I have two div I want to send selected text to another div using onMouseUp event? Right now this is working when I’m using <textarea> but when I’m using <span> tag this is not working. There is another way to do it?

Sandbox

Code:-

import React from "react";
import { Box, Grid, TextField, Typography } from "@material-ui/core";
import { useState } from "react";

const SendSelectedText = () => {
  const [label1, setlabel1] = useState("");
  const handleMouseUp = (e) => {
    setlabel1(
      e.target.value.substring(e.target.selectionStart, e.target.selectionEnd)
    );
    // setlabel1(window.getSelection().toString());
  };
  return (
    <>
      <Box className="sendSelectedTextPage">
        <Grid container spacing={3}>
          <Grid item xl={6} lg={6} md={6}>
            <span
              onMouseUp={handleMouseUp}
              style={{ width: "100%", height: "200px" }}
            >
              The point of using Lorem Ipsum is that it has a more-or-less
              normal distribution of letters, as opposed to using 'Content here,
              content here', making it look like readable English. Many … The
              point of using Lorem Ipsum is that it has a more-or-less normal
              distribution of letters, as opposed to using 'Content here,
              content here', making it look like readable English. Many …
            </span>
          </Grid>
          <Grid item xl={6} lg={6} md={6}>
            <TextField
              variant="outlined"
              size="small"
              label="Label One"
              value={label1}
              multiline
              rows={3}
              className="sendSelectedTextPageInput"
            />
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default SendSelectedText;

Thanks for your efforts!