How to disable autofocus of multiple material-ui popover windows?

These two popover windows open on page load, not triggered by button click, etc.
now user cannot click elsewhere before they close the two popover windows in strict order, which is not expected, user should be able to click anywhere on page, and close order doesn't matter
have tried autoFocus={false} attribute, doesn't work.

Here is the code example:

import React from "react";

import ReactDOM from "react-dom";

import Card from "@material-ui/core/Card";

import CardContent from "@material-ui/core/CardContent";

import Grid from "@material-ui/core/Grid";

import Typography from "@material-ui/core/Typography";

import SimplePopover from "./SimplePopover";

import "./styles.css";



class MyPopover extends React.Component {

  constructor(props) {

    super(props);



    this.state = {

      aCard: {},

      bCard: {}

    };



    this.aRef = React.createRef();

    this.bRef = React.createRef();

  }

  componentDidMount() {

    this.setState({ aCard: this.aRef.current, bCard: this.bRef.current });

  }

  render() {

    return (

      <div className="App">

        <h1>Hello CodeSandbox</h1>

        <h2>Start editing to see some magic happen!</h2>

        <Grid container spacing={24}>

          <Grid item xs={12} md={6}>

            <Typography

              autoFocus={true}

              style={{ fontSize: 16, fontFamily: "Museo Sans" }}

              color="textSecondary"

              gutterBottom

            >

              This is C

            </Typography>

          </Grid>

          <Grid item xs={12} md={3}>

            <div ref={this.aRef}>

              <Card id="id_a_card">

                <CardContent>

                  <Typography

                    autoFocus={true}

                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}

                    color="textSecondary"

                    gutterBottom

                  >

                    This is A

                  </Typography>

                </CardContent>

              </Card>

            </div>

            <SimplePopover

              popoverId={"first"}

              anchor={this.state.aCard}

              className=""

              data={{}}

            />

          </Grid>

          <Grid item xs={12} md={3}>

            <div ref={this.bRef}>

              <Card id="id_b_card">

                <CardContent>

                  <Typography

                    autoFocus={true}

                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}

                    color="textSecondary"

                    gutterBottom

                  >

                    This is B

                  </Typography>

                </CardContent>

              </Card>

            </div>

            <SimplePopover

              popoverId={"second"}

              anchor={this.state.bCard}

              className=""

              data={{}}

            />

          </Grid>

        </Grid>

      </div>

    );

  }

}



const rootElement = document.getElementById("root");

ReactDOM.render(<MyPopover />, rootElement);

User cannot click elsewhere before closing box A then B, how to fix this? Thanks a lot!

edited Jan 2 at 5:58

Siong Thye Goh

1,47911016

asked Jan 2 at 0:53

Chrisamd

and close order shouldn't matter,

– Chrisamd
Jan 2 at 0:56

add a comment |

Here is the code example:

import React from "react";

import ReactDOM from "react-dom";

import Card from "@material-ui/core/Card";

import CardContent from "@material-ui/core/CardContent";

import Grid from "@material-ui/core/Grid";

import Typography from "@material-ui/core/Typography";

import SimplePopover from "./SimplePopover";

import "./styles.css";



class MyPopover extends React.Component {

  constructor(props) {

    super(props);



    this.state = {

      aCard: {},

      bCard: {}

    };



    this.aRef = React.createRef();

    this.bRef = React.createRef();

  }

  componentDidMount() {

    this.setState({ aCard: this.aRef.current, bCard: this.bRef.current });

  }

  render() {

    return (

      <div className="App">

        <h1>Hello CodeSandbox</h1>

        <h2>Start editing to see some magic happen!</h2>

        <Grid container spacing={24}>

          <Grid item xs={12} md={6}>

            <Typography

              autoFocus={true}

              style={{ fontSize: 16, fontFamily: "Museo Sans" }}

              color="textSecondary"

              gutterBottom

            >

              This is C

            </Typography>

          </Grid>

          <Grid item xs={12} md={3}>

            <div ref={this.aRef}>

              <Card id="id_a_card">

                <CardContent>

                  <Typography

                    autoFocus={true}

                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}

                    color="textSecondary"

                    gutterBottom

                  >

                    This is A

                  </Typography>

                </CardContent>

              </Card>

            </div>

            <SimplePopover

              popoverId={"first"}

              anchor={this.state.aCard}

              className=""

              data={{}}

            />

          </Grid>

          <Grid item xs={12} md={3}>

            <div ref={this.bRef}>

              <Card id="id_b_card">

                <CardContent>

                  <Typography

                    autoFocus={true}

                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}

                    color="textSecondary"

                    gutterBottom

                  >

                    This is B

                  </Typography>

                </CardContent>

              </Card>

            </div>

            <SimplePopover

              popoverId={"second"}

              anchor={this.state.bCard}

              className=""

              data={{}}

            />

          </Grid>

        </Grid>

      </div>

    );

  }

}



const rootElement = document.getElementById("root");

ReactDOM.render(<MyPopover />, rootElement);

User cannot click elsewhere before closing box A then B, how to fix this? Thanks a lot!

edited Jan 2 at 5:58

Siong Thye Goh

1,47911016

asked Jan 2 at 0:53

Chrisamd

and close order shouldn't matter,

– Chrisamd
Jan 2 at 0:56

add a comment |

Here is the code example:

import React from "react";

import ReactDOM from "react-dom";

import Card from "@material-ui/core/Card";

import CardContent from "@material-ui/core/CardContent";

import Grid from "@material-ui/core/Grid";

import Typography from "@material-ui/core/Typography";

import SimplePopover from "./SimplePopover";

import "./styles.css";



class MyPopover extends React.Component {

  constructor(props) {

    super(props);



    this.state = {

      aCard: {},

      bCard: {}

    };



    this.aRef = React.createRef();

    this.bRef = React.createRef();

  }

  componentDidMount() {

    this.setState({ aCard: this.aRef.current, bCard: this.bRef.current });

  }

  render() {

    return (

      <div className="App">

        <h1>Hello CodeSandbox</h1>

        <h2>Start editing to see some magic happen!</h2>

        <Grid container spacing={24}>

          <Grid item xs={12} md={6}>

            <Typography

              autoFocus={true}

              style={{ fontSize: 16, fontFamily: "Museo Sans" }}

              color="textSecondary"

              gutterBottom

            >

              This is C

            </Typography>

          </Grid>

          <Grid item xs={12} md={3}>

            <div ref={this.aRef}>

              <Card id="id_a_card">

                <CardContent>

                  <Typography

                    autoFocus={true}

                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}

                    color="textSecondary"

                    gutterBottom

                  >

                    This is A

                  </Typography>

                </CardContent>

              </Card>

            </div>

            <SimplePopover

              popoverId={"first"}

              anchor={this.state.aCard}

              className=""

              data={{}}

            />

          </Grid>

          <Grid item xs={12} md={3}>

            <div ref={this.bRef}>

              <Card id="id_b_card">

                <CardContent>

                  <Typography

                    autoFocus={true}

                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}

                    color="textSecondary"

                    gutterBottom

                  >

                    This is B

                  </Typography>

                </CardContent>

              </Card>

            </div>

            <SimplePopover

              popoverId={"second"}

              anchor={this.state.bCard}

              className=""

              data={{}}

            />

          </Grid>

        </Grid>

      </div>

    );

  }

}



const rootElement = document.getElementById("root");

ReactDOM.render(<MyPopover />, rootElement);

User cannot click elsewhere before closing box A then B, how to fix this? Thanks a lot!

edited Jan 2 at 5:58

Siong Thye Goh

1,47911016

asked Jan 2 at 0:53

Chrisamd

Here is the code example:

import React from "react";

import ReactDOM from "react-dom";

import Card from "@material-ui/core/Card";

import CardContent from "@material-ui/core/CardContent";

import Grid from "@material-ui/core/Grid";

import Typography from "@material-ui/core/Typography";

import SimplePopover from "./SimplePopover";

import "./styles.css";



class MyPopover extends React.Component {

  constructor(props) {

    super(props);



    this.state = {

      aCard: {},

      bCard: {}

    };



    this.aRef = React.createRef();

    this.bRef = React.createRef();

  }

  componentDidMount() {

    this.setState({ aCard: this.aRef.current, bCard: this.bRef.current });

  }

  render() {

    return (

      <div className="App">

        <h1>Hello CodeSandbox</h1>

        <h2>Start editing to see some magic happen!</h2>

        <Grid container spacing={24}>

          <Grid item xs={12} md={6}>

            <Typography

              autoFocus={true}

              style={{ fontSize: 16, fontFamily: "Museo Sans" }}

              color="textSecondary"

              gutterBottom

            >

              This is C

            </Typography>

          </Grid>

          <Grid item xs={12} md={3}>

            <div ref={this.aRef}>

              <Card id="id_a_card">

                <CardContent>

                  <Typography

                    autoFocus={true}

                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}

                    color="textSecondary"

                    gutterBottom

                  >

                    This is A

                  </Typography>

                </CardContent>

              </Card>

            </div>

            <SimplePopover

              popoverId={"first"}

              anchor={this.state.aCard}

              className=""

              data={{}}

            />

          </Grid>

          <Grid item xs={12} md={3}>

            <div ref={this.bRef}>

              <Card id="id_b_card">

                <CardContent>

                  <Typography

                    autoFocus={true}

                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}

                    color="textSecondary"

                    gutterBottom

                  >

                    This is B

                  </Typography>

                </CardContent>

              </Card>

            </div>

            <SimplePopover

              popoverId={"second"}

              anchor={this.state.bCard}

              className=""

              data={{}}

            />

          </Grid>

        </Grid>

      </div>

    );

  }

}



const rootElement = document.getElementById("root");

ReactDOM.render(<MyPopover />, rootElement);

User cannot click elsewhere before closing box A then B, how to fix this? Thanks a lot!

reactjs material-ui popover

edited Jan 2 at 5:58

Siong Thye Goh

1,47911016

asked Jan 2 at 0:53

Chrisamd

edited Jan 2 at 5:58

Siong Thye Goh

1,47911016

asked Jan 2 at 0:53

Chrisamd

edited Jan 2 at 5:58

Siong Thye Goh

1,47911016

edited Jan 2 at 5:58

Siong Thye Goh

1,47911016

edited Jan 2 at 5:58

Siong Thye Goh

1,47911016

asked Jan 2 at 0:53

Chrisamd

asked Jan 2 at 0:53

Chrisamd

asked Jan 2 at 0:53

Chrisamd

and close order shouldn't matter,

– Chrisamd
Jan 2 at 0:56

add a comment |

and close order shouldn't matter,

– Chrisamd
Jan 2 at 0:56

and close order shouldn't matter,

– Chrisamd
Jan 2 at 0:56

add a comment |

1 Answer
1

active

oldest

votes

From the docs:

Things to know when using the Popover component:

The component is built on top of the Modal component.

The scroll and click away are blocked unlike with the Popper component.

So Popover behaves like a modal dialog. So if you open one and then another, it is like opening a second modal dialog from the first and that is why you need to close them in the appropriate order. If you don't want this behavior, you should be using Popper instead.

answered Jan 2 at 3:48

Ryan Cogswell

5,2111624

I see, will try Popper, thank you so much!

– Chrisamd
Jan 2 at 5:29

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000136%2fhow-to-disable-autofocus-of-multiple-material-ui-popover-windows%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

From the docs:

Things to know when using the Popover component:

The component is built on top of the Modal component.

The scroll and click away are blocked unlike with the Popper component.

answered Jan 2 at 3:48

Ryan Cogswell

5,2111624

I see, will try Popper, thank you so much!

– Chrisamd
Jan 2 at 5:29

add a comment |

From the docs:

Things to know when using the Popover component:

The component is built on top of the Modal component.

The scroll and click away are blocked unlike with the Popper component.

answered Jan 2 at 3:48

Ryan Cogswell

5,2111624

I see, will try Popper, thank you so much!

– Chrisamd
Jan 2 at 5:29

add a comment |

From the docs:

Things to know when using the Popover component:

The component is built on top of the Modal component.

The scroll and click away are blocked unlike with the Popper component.

answered Jan 2 at 3:48

Ryan Cogswell

5,2111624

From the docs:

Things to know when using the Popover component:

The component is built on top of the Modal component.

The scroll and click away are blocked unlike with the Popper component.

answered Jan 2 at 3:48

Ryan Cogswell

5,2111624

answered Jan 2 at 3:48

Ryan Cogswell

5,2111624

answered Jan 2 at 3:48

Ryan Cogswell

5,2111624

answered Jan 2 at 3:48

Ryan Cogswell

5,2111624

I see, will try Popper, thank you so much!

– Chrisamd
Jan 2 at 5:29

add a comment |

I see, will try Popper, thank you so much!

– Chrisamd
Jan 2 at 5:29

I see, will try Popper, thank you so much!

– Chrisamd
Jan 2 at 5:29

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu