無法從Material-UI的Dialogue中的Popper復制到剪貼板

Question

在此處重現該錯誤的步驟：（嘗試在Firefox中打開，我幾乎讓chrome崩潰了：P） https://codesandbox.io/s/73z5293391

1. 單擊“ OPEN SIMPLE DIALOGUE對話框”按鈕。 現在，您會看到一個對話框，單擊“ TOGGLE POPPER按鈕。
2. 現在，您將看到一個Popper，它具有一個輸入框和一個COPY按鈕。
3. 你需要在這種情況下，輸入框里面的文本復制hello 。

因此，我實際上無法復制到剪貼板。 首先，我認為這可能與“ Dialogue 。 但不是。 在一個Dialogue它起作用。 但不適用於從Dialogue彈出的Popper（它也僅適用於Popper）。 在這種情況下，您能幫我復制到剪貼板嗎？

再次源代碼：

    import React from "react";
    import PropTypes from "prop-types";
    import { withStyles } from "@material-ui/core/styles";
    import Button from "@material-ui/core/Button";
    import Avatar from "@material-ui/core/Avatar";
    import List from "@material-ui/core/List";
    import ListItem from "@material-ui/core/ListItem";
    import ListItemAvatar from "@material-ui/core/ListItemAvatar";
    import ListItemText from "@material-ui/core/ListItemText";
    import DialogTitle from "@material-ui/core/DialogTitle";
    import Dialog from "@material-ui/core/Dialog";
    import PersonIcon from "@material-ui/icons/Person";
    import AddIcon from "@material-ui/icons/Add";
    import Typography from "@material-ui/core/Typography";
    import blue from "@material-ui/core/colors/blue";
    import DialogContent from "@material-ui/core/DialogContent";
    import Popper from "@material-ui/core/Popper";

    const emails = ["username@gmail.com", "user02@gmail.com"];

    const styles = {
      avatar: {
        backgroundColor: blue[100],
        color: blue[600]
      }
    };

    class SimpleDialog extends React.Component {
      state = {
        anchorEl: null,
        openPopper: false
      };

      handleClose = () => {
        this.props.onClose(this.props.selectedValue);
      };

      handleListItemClick = value => {
        this.props.onClose(value);
      };

      copytoClipBoard = () => {
        this.hello.select();
        try {
          return document.execCommand("copy");
        } catch (err) {
          console.log("Oops, unable to copy");
        }
      };

      handleClick = event => {
        const { currentTarget } = event;
        this.setState(state => ({
          anchorEl: currentTarget,
          openPopper: !state.openPopper
        }));
      };

      render() {
        const { classes, onClose, selectedValue, ...other } = this.props;
        const { anchorEl, openPopper } = this.state;
        const id = openPopper ? "simple-popper" : null;

        return (
          <Dialog
            onClose={this.handleClose}
            aria-labelledby="simple-dialog-title"
            {...other}
          >
            <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
            <DialogContent>
              <Button
                aria-describedby={id}
                variant="contained"
                onClick={this.handleClick}
              >
                Toggle Popper
              </Button>

              <Popper
                id={id}
                open={openPopper}
                anchorEl={anchorEl}
                style={{ zIndex: 10000 }}
              >
                <input
                  value="hello"
                  readOnly
                  type="text"
                  ref={node => (this.hello = node)}
                />
                <Button onClick={this.copytoClipBoard}> Copy </Button>
              </Popper>
              <List>
                {emails.map(email => (
                  <ListItem
                    button
                    onClick={() => this.handleListItemClick(email)}
                    key={email}
                  >
                    <ListItemAvatar>
                      <Avatar className={classes.avatar}>
                        <PersonIcon />
                      </Avatar>
                    </ListItemAvatar>
                    <ListItemText primary={email} />
                  </ListItem>
                ))}
                <ListItem
                  button
                  onClick={() => this.handleListItemClick("addAccount")}
                >
                  <ListItemAvatar>
                    <Avatar>
                      <AddIcon />
                    </Avatar>
                  </ListItemAvatar>
                  <ListItemText primary="add account" />
                </ListItem>
              </List>
            </DialogContent>
          </Dialog>
        );
      }
    }

    SimpleDialog.propTypes = {
      classes: PropTypes.object.isRequired,
      onClose: PropTypes.func,
      selectedValue: PropTypes.string
    };

    const SimpleDialogWrapped = withStyles(styles)(SimpleDialog);

    class SimpleDialogDemo extends React.Component {
      state = {
        open: false,
        selectedValue: emails[1]
      };

      handleClickOpen = () => {
        this.setState({
          open: true
        });
      };

      handleClose = value => {
        this.setState({ selectedValue: value, open: false });
      };

      render() {
        return (
          <div>
            <Typography variant="subtitle1">
              Selected: {this.state.selectedValue}
            </Typography>
            <br />
            <Button
              variant="outlined"
              color="primary"
              onClick={this.handleClickOpen}
            >
              Open simple dialog
            </Button>
            <SimpleDialogWrapped
              selectedValue={this.state.selectedValue}
              open={this.state.open}
              onClose={this.handleClose}
            />
          </div>
        );
      }
    }

    export default SimpleDialogDemo;

Answer 1

@ akhila-hegde您可以將disablePortal添加到Popper中以解決此問題。 請注意，復制到剪貼板不是問題。 問題是您無法在字段中選擇文本（因為它在門戶中）。

這里是disablePortal沙盒的鏈接設置為true - https://codesandbox.io/s/lxjwj3p8m9