Issue
After clicking on the "login" button that is inside the navbar, the vertical scroll disappears and after leaving the button it comes back. The Scroll should remain unchanged, but for some reason it has this unwanted behavior.
The code in codesandbox is in this link
I've already tried using overflow: "auto", overflow-y and it didn't work. How to solve this problem? Can someone help me?
Solution
Just add disableScrollLock={true}
to Menu
in ButtonSignIn.tsx
import { useState } from "react";
import { MenuItem, Button, Menu } from "@mui/material";
import { SxProps, Theme } from "@mui/material";
interface IButtonLogin {
children: React.ReactNode | React.ReactNode[];
sx?: SxProps<Theme>;
size?: "small" | "medium" | "large";
}
export const ButtonSignIn = ({ children, sx }: IButtonLogin) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleLogin = () => {
setAnchorEl(null);
window.location.href = "https://www.google.com/";
};
return (
<div>
<Button
onClick={(event) => setAnchorEl(event.currentTarget)}
color="inherit"
sx={sx}
>
{children}
</Button>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "right"
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right"
}}
open={open}
onClose={() => setAnchorEl(null)}
disableScrollLock={true}
>
<MenuItem onClick={() => handleLogin()} key="loginRedirect">
Login here
</MenuItem>
</Menu>
</div>
);
};
Answered By - Franco A. Torres
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.