Develop Reference

Why is the cursor selection to highlight text and perform copy/paste is not working on Chrome for my React app?

I am using Material UI (V4). There is a Customized SnackBar component being used to display the messages from backed, like success and failure messages. But, I am unable to copy the message shown on the snackbar component. This issue is seen only on Chrome (the text selection is working fine on Safari browser). Here is the sample code I'm using:
import React from 'react';
import Button from '#material-ui/core/Button';
import Snackbar from '#material-ui/core/Snackbar';
import MuiAlert from '#material-ui/lab/Alert';
import { makeStyles } from '#material-ui/core/styles';
import { Icon } from '#material-ui/core';
import SmsFailedIcon from '#material-ui/icons/SmsFailed';
const successIcon = () => (
<Icon>
<SmsFailedIcon />
</Icon>
);
const failedIcon = () => (
<Icon>
<SmsFailedIcon />
</Icon>
);
function Alert(props) {
return (
<MuiAlert
elevation={6}
variant="filled"
{...props}
iconMapping={{ success: successIcon, error: failedIcon }}
/>
);
}
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
'& > * + *': {
marginTop: theme.spacing(2),
},
},
}));
export default function CustomizedSnackbars() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClick = () => {
setOpen(true);
};
const handleClose = (event, reason) => {
setOpen(false);
};
return (
<div className={classes.root}>
<Button variant="outlined" onClick={handleClick}>
Open success snackbar
</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success">
This is a success message!
</Alert>
</Snackbar>
</div>
);
}
Can anyone please advise ?

How to center a text in mui snackbar

I'm trying to center a text in a muisnackbar but unfortunately I can't do it.
Here is the code
I am taker of any proposal
import Stack from "#mui/material/Stack";
import Button from "#mui/material/Button";
import Snackbar from "#mui/material/Snackbar";
import MuiAlert, { AlertProps } from "#mui/material/Alert";
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
ref
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
export default function CustomizedSnackbars() {
const [open, setOpen] = React.useState(false);
const handleClick = () => {
setOpen(true);
};
const handleClose = (
event?: React.SyntheticEvent | Event,
reason?: string
) => {
if (reason === "clickaway") {
return;
}
setOpen(false);
};
return (
<Stack spacing={2} sx={{ width: "100%" }}>
<Button variant="outlined" onClick={handleClick}>
Open success snackbar
</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
This is a success message!
</Alert>
</Snackbar>
</Stack>
);
}
I tested justifyContent, AlignItem , AlignContent but in vain
Thank you in advance

To center a text inside Snackbar you can use .MuiAlert-message class, styles of this class will be applied to the message wrapper element. Like:-
<Snackbar open={true} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success" sx={{ width: '300px','& .MuiAlert-message':{textAlign:"center", width:"inherit"} }}>
This is a success message!
</Alert>
</Snackbar>

You can pass this prop to a Snackbar component
ContentProps={{
sx: {
display: 'block',
textAlign: "center"
}
}}

Creating a variant style for Modal on chakra-ui

I want to create a Modal variant with and set the default width and background color (among other things). I can't find documentation that says exactly how to do it, but I figured using variants would be the way to go.
I've put my best attempt on Code Sandbox here: https://codesandbox.io/s/vigilant-germain-u3mkx?
Any suggestions would be welcome.

Add baseStyle in the Modal component instead of variants
import {
ChakraProvider,
Modal,
extendTheme,
Button,
useDisclosure,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalCloseButton,
ModalBody
} from "#chakra-ui/react";
import "./styles.css";
const theme = extendTheme({
components: {
Modal: {
baseStyle: (props) => ({
dialog: {
maxWidth: ["95%", "95%", "95%"],
minWidth: "95%",
bg: "#00ff00"
}
})
}
}
});
export default function App() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<ChakraProvider theme={theme}>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose} variant="wide">
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<p>Test</p>
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</ChakraProvider>
);
}

React JS / Material UI - Call method from imported Component

I'm trying to call the handleLoginOpen method from LoginModal.js, which I imported in File1.js.
File1 is actually a component nested in an AppBar, where i have an account IconButton that shows two MenuItem: Login or Register. If I press login I would like to show a Modal with the login form.
Here the two files:
File1.js:
import React from "react";
import { IconButton, Menu, MenuItem } from "#material-ui/core";
import AccountCircleIcon from "#material-ui/icons/AccountCircle";
import LoginModal from "../components/LoginModal";
export default function AccountNotRegistered() {
const [anchorEl, setAnchorEl] = React.useState(null);
const isMenuOpen = Boolean(anchorEl);
const handleProfileMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleProfileMenuClose = () => {
setAnchorEl(null);
};
const menuId = "account-menu";
const renderMenu = (
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
id={menuId}
keepMounted
transformOrigin={{ vertical: "top", horizontal: "right" }}
open={isMenuOpen}
onClose={handleProfileMenuClose}
>
<MenuItem onClick={handleLoginOpen}>Login</MenuItem> <------------------- HERE I CALL THE METHOD
<MenuItem onClick={handleProfileMenuClose}>Register</MenuItem>
</Menu>
);
return (
<div>
<IconButton color="inherit" onClick={handleProfileMenuOpen}>
<AccountCircleIcon />
</IconButton>
<LoginModal />
{renderMenu}
</div>
);
}
LoginModal.js:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Modal from "#material-ui/core/Modal";
import { Backdrop } from "#material-ui/core";
import Fade from "#material-ui/core/Fade";
const useStyles = makeStyles((theme) => ({
modal: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
paper: {
backgroundColor: theme.palette.background.paper,
border: "2px solid #000",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
export default function LoginModal() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleLoginOpen = () => { <----------------------------------HERE IS THE METHOD
setOpen(true);
};
const handleLoginClose = () => {
setOpen(false);
};
return (
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={open}
onClose={handleLoginClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<div className={classes.paper}>
<h2 id="transition-modal-title">Transition modal</h2>
<p id="transition-modal-description">
react-transition-group animates me.
</p>
</div>
</Fade>
</Modal>
);
}
Thank you for your help!

If you want to use a method of another component you need to create parent-child relation of components and then pass those methods as a prop to child component.
You should use/call <LoginModal /> inside File1.js where this LoginModel would take a prop value for visibility of modal such as isModalShown and then a function to close the modal such as closeModal
so when you call the component it would look like:
<LoginModal isModalShown={isModalShown} closeModal={closeModal} />
You need to maintain the state variable in File1.js since showing/hiding modal is done in the same file.
import React from "react";
import { IconButton, Menu, MenuItem } from "#material-ui/core";
import AccountCircleIcon from "#material-ui/icons/AccountCircle";
import LoginModal from "../components/LoginModal";
export default function AccountNotRegistered() {
const [anchorEl, setAnchorEl] = React.useState(null);
const [isModalShown, toggleModal] = React.useState(false);
const closeModal = () => toggleModal(false)
const openModal = () => toggleModal(false)
const isMenuOpen = Boolean(anchorEl);
const handleProfileMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleProfileMenuClose = () => {
setAnchorEl(null);
};
const menuId = "account-menu";
const renderMenu = (
<React.Fragment>
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
id={menuId}
keepMounted
transformOrigin={{ vertical: "top", horizontal: "right" }}
open={isMenuOpen}
onClose={handleProfileMenuClose}>
<MenuItem onClick={openModal}>Login</MenuItem>
<MenuItem onClick={handleProfileMenuClose}>Register</MenuItem>
</Menu>
</React.Fragment>
);
return (
<div>
<IconButton color="inherit" onClick={handleProfileMenuOpen}>
<AccountCircleIcon />
</IconButton>
<LoginModal isModalShown={isModalShown} closeModal={closeModal} />
{renderMenu}
</div>
);
}
and then in the LoginModal.js
export default function LoginModal(props) {
const classes = useStyles();
return (
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={props.isModalShown}
onClose={props.closeModal}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<div className={classes.paper}>
<h2 id="transition-modal-title">Transition modal</h2>
<p id="transition-modal-description">
react-transition-group animates me.
</p>
</div>
</Fade>
</Modal>
);
}
I believe you want to show the modal on click of Register as well, you can create a wrapper for this Modal component and then pass custom props to it, which would then takes care of rendering <LoginModal /> or <RegisterModal />

Can't remove scrollbar from Material UI Dialog

I have a modal window with a keyboard in it. Everything's fine, except that I can't remove the scrollbar. I tried adding overflow:'hidden' as inline css but still nothing.
Also, even when using container-full padding-0 in bootstrap, the components still won't go till the edge of the screen. So I guess here's the problem.
This is where I render my component
<div className="container-full padding-0">
<div className="row">
<div className="col-sm-3">
<ButtonsGrid list={this.state.list} clicked={this.clicked}/>
</div>
<div className="col-sm-3" style={{paddingLeft:0, paddingRight:0}}>
<ButtonsGrid list = {this.state.list} clicked={this.clicked}/>
</div>
<div className="col-sm-6" style={{paddingRight: 0, paddingLeft: 0}}>
<Keyboard search={this.search}/> <-------------- HERE
</div>
</div>
</div>
And the component's render looks like this:
render() {
return(
<div>
<Paper
onClick={this.toggleKeyboard}>
<p
style={{
fontSize:40,
overflow:'hidden'}}>
{this.state.input !== '' ?
this.state.input : 'Search...'}
</p>
</Paper>
<br />
{this.state.showKeyboard ?
<Dialog
open={this.state.showKeyboard}
maxWidth='md'fullWidth>
<GridList
cellHeight={50}
cols={11}
style={{overflowX:'hidden'}}>
{this.state.keyboard.length > 0 ?
this.state.keyboard.map(key => {
return(
<Button
disabled={key.value === ''}
key={Math.random()*13}
style={{minWidth: '30px', border: '1px solid'}}
color="default"
onClick={key.value !== 'Enter' ?
() => this.onInputChanged(key.value) :
() => this.search(key.value)}>
<div
style={{fontSize:'15px',
display: 'flex',
justifyContent: 'center',
textAlign:'center'}}
>
{key.value}
</div>
</Button>
)
}):null}
</GridList>
</Dialog>:''}
</div>
);
}
Also, here's a visual.
If I inspect the element in the browser, I can just uncheck overflow and it removes it.
I tried adding overflow:'hidden' to the div where the component gets rendered but it still wouldn't work.
Any ideas?

Just set overflow on DialogContent:
<Dialog
fullWidth={true}
maxWidth="xl"
open={this.state.isChartOpen}
onClose={() => this.setState({ isChartOpen: false })}
>
<DialogContent style={{ overflow: "hidden" }}>
<ContractPriceChart contracts={this.props.contracts} />
</DialogContent>
</Dialog>

Inside your sx property add:
'&::-webkit-scrollbar': {display: none}

I solved this problem in functional component in following code.
You should manipulate the overflow attribute of "< html >" tag.
When isOpen is true it will add "overflow-hidden" class to the html tag.
And when isOpen is false, it will remove the "overflow-hidden" class from the html tag.
import React, { useEffect } from 'react';
import Dialog from '#material-ui/core/Dialog';
import DialogContent from '#material-ui/core/DialogContent';
const MyDialog = (props) => {
const { isOpen } = props;
useEffect(() => {
const htmlElement = document.querySelector('html');
if (isOpen && !htmlElement.classList.contains('overflow-hidden')) {
htmlElement.classList.add('overflow-hidden');
} else {
htmlElement.classList.remove('overflow-hidden');
}
}, []);
useEffect(() => {
const htmlElement = document.querySelector('html');
if (isOpen && !htmlElement.classList.contains('overflow-hidden')) {
htmlElement.classList.add('overflow-hidden');
} else {
htmlElement.classList.remove('overflow-hidden');
}
}, [isOpen]);
return (
<div>
<Dialog
open={isOpen}
maxWidth="xl"
>
<DialogContent>
Content 1
Content 2
</DialogContent>
</Dialog>
</div>
);
};
And add this class to your global style.
.overflow-hidden {
overflow: hidden !important;
}

have you tried adding !important? like this: overflow:'hidden !important'

put all dialog element in <Dialog><DialogContent>.....</DialogContent></Dialog>

put all dialog element in <Dialog><DialogContent>.....</DialogContent></Dialog>here code:
render() {
return(
<div>
<Paper
onClick={this.toggleKeyboard}>
<p
style={{
fontSize:40,
overflow:'hidden'}}>
{this.state.input !== '' ?
this.state.input : 'Search...'}
</p>
</Paper>
<br />
{this.state.showKeyboard ?
<Dialog
open={this.state.showKeyboard}
maxWidth='md'fullWidth>
<GridList
cellHeight={50}
cols={11}
style={{overflowX:'hidden'}}>
<DialogContent>
{this.state.keyboard.length > 0 ?
this.state.keyboard.map(key => {
return(
<Button
disabled={key.value === ''}
key={Math.random()*13}
style={{minWidth: '30px', border: '1px solid'}}
color="default"
onClick={key.value !== 'Enter' ?
() => this.onInputChanged(key.value) :
() => this.search(key.value)}>
<div
style={{fontSize:'15px',
display: 'flex',
justifyContent: 'center',
textAlign:'center'}}
>
{key.value}
</div>
</Button>
)
}):null}
</GridList>
</DialogContent>
</Dialog>:''}
</div>
);
}

Try utilizing the pseudo element -webkit-scrollbar to remove it:
.MuiDialog-paper::-webkit-scrollbar {
display: none;
}
if it doesn't work you can try:
.MuiDialog-root::-webkit-scrollbar {
display: none;
}
The downside is that you can't use it inline, but I tested here it works.

you can try with this:
<DialogContent className={classes.hiddenScroll}>
and their styles:
const useStyles = makeStyles(theme => ({
hiddenScroll: {
overflow: 'hidden',
},

I was using Material-ui Backdrop faced the same issue. Tried Fatih Turgut approach with a slight difference
import React, { useEffect, useState } from 'react';
import { Backdrop } from '#material-ui/core';
import { makeStyles } from '#material-ui/core';
const useStyles = makeStyles({
paper: {
zIndex: 20,
},
});
function Example() {
const [open, setOpen] = useState(true);
useEffect(() => {
const htmlElement = document.querySelector('body');
if (open || !htmlElement.classList.contains('overflow-hidden')) {
htmlElement.classList.add('overflow-hidden');
} else {
htmlElement.classList.remove('overflow-hidden');
}
}, [open]);
const classes = useStyles();
const handleOpen = open => {
setOpen(open);
};
return (
<Backdrop
className={classes.paper}
open={open}
onClick={() => handleOpen(!open)}
>
<h1>hello</h1>
</Backdrop>
);
}
export default Example;