Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Select] blink on mobile (samsung) #16905

Open
michael-ecb opened this issue Aug 6, 2019 · 4 comments
Open

[Select] blink on mobile (samsung) #16905

michael-ecb opened this issue Aug 6, 2019 · 4 comments
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module!

Comments

@michael-ecb
Copy link

michael-ecb commented Aug 6, 2019

Hi,
select popup menu is blinking on mobile when there is a lot of content on the page,
it's not happen on other device , only on samsung devices...
it's happen more often when we lose the focus...
to reproduce I put a data at the end of this page :
here a live example

blink

@michael-ecb michael-ecb changed the title select blink on mobile ( samsung select blink on mobile (samsung) Aug 6, 2019
@oliviertassinari oliviertassinari added the bug 🐛 Something doesn't work label Aug 6, 2019
@oliviertassinari oliviertassinari added the component: select This is the name of the generic UI component, not the React module! label Aug 23, 2019
@rodrigocipriani
Copy link

In my webapp the Menu is also blinking .

Chrome Version:
Version 76.0.3809.100 (Official Build) (64-bit)

Windows 10
"@material-ui/core": "^4.3.3",
"@material-ui/pickers": "^3.2.3",
"react": "^16.8.3",
"react-dom": "^16.8.3",
import React from "react";
import { withRouter } from "react-router-dom";
import {
  ListItem,
  Paper,
  Divider,
  IconButton,
  ListItemSecondaryAction,
  Menu,
  MenuItem
} from "@material-ui/core";
import EditIcon from "@material-ui/icons/Edit";
import DeliveryTitle from "./DeliveryTitle";
import DeliveryComments from "./DeliveryComments";
import { MoreVert } from "@material-ui/icons";
import DeliveryDelete from "./DeliveryDelete";

const DeliveryResume = ({ delivery, location, history }) => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const isOpen = Boolean(anchorEl);

  function handleMoreMenuClick(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleMoreMenuClose() {
    setAnchorEl(null);
  }
  return (
    <Paper style={{ marginBottom: 8 }}>
      <ListItem style={{ paddingTop: 0 }}>
        <DeliveryTitle delivery={delivery} />
        <ListItemSecondaryAction>
          <IconButton
            aria-label="more"
            aria-controls="long-menu"
            aria-haspopup="true"
            onClick={handleMoreMenuClick}
          >
            <MoreVert />
          </IconButton>
          <Menu
            anchorEl={anchorEl}
            // keepMounted
            open={isOpen}
            onClose={handleMoreMenuClose}
          >
            <MenuItem
              onClick={() =>
                history.push(`${location.pathname}/edit/${delivery.id}`)
              }
            >
              <IconButton edge="end" aria-label="Edit">
                <EditIcon />
              </IconButton>
              Editar
            </MenuItem>
            <MenuItem onClick={handleMoreMenuClose}>
              <DeliveryComments delivery={delivery} showIconText={true} />
            </MenuItem>
            <MenuItem onClick={handleMoreMenuClose}>
              <DeliveryDelete delivery={delivery} showIconText={true} />
            </MenuItem>
          </Menu>
        </ListItemSecondaryAction>
      </ListItem>

      <Divider />
    </Paper>
  );
};

export default withRouter(DeliveryResume);

@jtlocsei
Copy link

I noticed this today on a Moto G6 Plus (Android) with Chrome browser when browisng the material-ui docs themselves. Video:
ezgif com-video-to-gif

@oliviertassinari oliviertassinari changed the title select blink on mobile (samsung) [Select] blink on mobile (samsung) Aug 22, 2020
@amen-souissi
Copy link
Contributor

Hello @oliviertassinari!

We still have the same problem with the DatePicker Popper (it's a Popper problem).

Enregistrement.de.l.ecran.2021-10-19.a.15.37.58.mov
"react": "^17.0.2",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@mui/lab": "^5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.0.1",
Chrome Version:
Version 94.0.4606.71
MacOS

@andrelmchaves
Copy link

@michael-ecb Could you confirm this is still an issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

6 participants