The TextField on Paper closes unexpectedly in Material UI - reactjs

In a Project, I have list of countries with its specific country codes. In order to search the countries and their codes I have created TextField on Paper(Material UI component). When clicked on it closes unexpectedly. See the code below for reference.
<TextField
id="standard-select-currency"
select
value={countryCode}
onChange={handleChange}
SelectProps={{
renderValue: (value) => value
}}
>
<Paper style={{ width: "280px" }}>
<div
style={{
backgroundColor: "white",
top: "8px",
position: "sticky",
zIndex: "999",
width: "inherit"
}}
>
{/* Here this component closes when clicked on it */}
<TextField
placeholder="Enter Your Country"
onChange={onChange}
type="text"
/>
<hr />
</div>
{Object.values(countryData).map((values, i) => (
<MenuItem key={values.calling_code} value={values.calling_code}>
<div
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
width: "100%",
position: "relative"
}}
>
<p>{values.country}</p>
<p>{"+" + values.calling_code}</p>
</div>
</MenuItem>
))}
</Paper>
</TextField>
What could be best possible solution to prevent it from shutting down?
Codesandbox Link: https://codesandbox.io/s/material-demo-forked-hfwb4

just add,
<TextField
placeholder="Enter Your Country"
onChange={onChange} onClick={(event)=>event.stopPropagation()}
type="text"
/>
it will
it will not close unexpectedly.

Related

ReactJs - How to add z-index effect for material-ui autocomplete dropdown?

In React application, using #material-ui for adding <Autocomplete>. Here I want to display dropdown behind the input field. So I am trying to add z-index for styles but its not working. Also I want to hide the scrollbar but not the scroll functionality.
<Autocomplete
id="nba teams"
options={list}
disableClearable
renderInput={(params) => (
<TextField
classes={{ root: styles.input }}
{...params}
InputProps={{
...params.InputProps,
disableUnderline: true,
}}
placeholder="Search for Creators"
/>
)}
PaperComponent={({ children }) => (
<Paper
style={{
width: '280px',
backgroundColor: '#f4f7f8',
marginLeft: '-20px',
marginTop: '5px',
position: 'absolute',
zIndex: -1,
}}
>
{children}
</Paper>
)}
freeSolo
getOptionLabel={(data) => data.name}
renderOption={(obj) => <Result data={obj} />}
style={{ width: 280, border: 'none', position: 'relative', zIndex: 2 }}
value={selectedTeam}
classes={{ paper: styles.paper }}
onChange={(_event, newTeam) => {
window.location.href = `/`
setSelectedTeam(newTeam)
}}
/>
Please help me to solve these 2 issues.

how to change one input field inside map in react?

I have 3 input fields but changing one is affecting every input field.
I tried adding keys to the fields as well.
Code:
const App = () => {
const List = [
["1", "2"],
["3", "4"],
["10 ", "20"]
];
return (
<>
<Form layout="vertical" requiredMark={false}>
{List.map((l, index) => (
<div style={{ display: "flex", alignItems: "center" }} key={index}>
<Form.Item name="startRange">
<InputNumber
defaultValue={l[0]}
style={{
width: "70px",
height: "43px",
borderRadius: "4.5px",
border: "1px solid #CBCBCB"
}}
min={1}
max={100}
/>
</Form.Item>
<p style={{ marginLeft: "15px", marginRight: "12px" }}>To</p>
<Form.Item name="endRange">
<InputNumber
defaultValue={l[1]}
style={{
width: "70px",
height: "43px",
borderRadius: "4.5px",
border: "1px solid #CBCBCB"
}}
min={1}
max={100}
/>
</Form.Item>
</div>
))}
</Form>
</>
);
};
Codesandbox link: https://codesandbox.io/s/basic-antd-4-16-9-forked-p7r5wf?file=/index.js
You need to set your name unique for each input item. For example:
<Form.Item name={"startRange"+index}>
<Form.Item name={"endRange"+index}>

Make button to fill whole width in react

I am implementing the following logging component in React:
I want all the buttons to have the same width and I want them to fill the whole width available.
This is my code:
export default function Login (props: any) {
return(
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
'& > :not(style)': {
m: 1,
width: 400,
height: 500,
},
}}
>
<Paper elevation={10}>
<div style={{paddingTop: 30}}>
LOGIN
</div>
<div style={{paddingTop: 40}}>
<form>
<div style={{paddingTop: 30}}>
<FormControl variant="standard">
<InputLabel htmlFor="email">
Email
</InputLabel>
<Input
id="email"
startAdornment={
<InputAdornment position="start">
<PersonIcon />
</InputAdornment>
}
/>
</FormControl>
</div>
<div style={{paddingTop: 30}}>
<FormControl variant="standard">
<InputLabel htmlFor="password">
Password
</InputLabel>
<Input
id="password"
startAdornment={
<InputAdornment position="start">
<KeyIcon />
</InputAdornment>
}
/>
</FormControl>
</div>
<div style={{paddingTop: 30}}>
<Button variant="contained">Accept</Button>
</div>
<div style={{paddingTop: 30}}>
<Button variant="contained" endIcon={<GoogleIcon />}>
Login with Google
</Button>
</div>
<div style={{paddingTop: 30}}>
<Button variant="contained" >
Cancel
</Button>
</div>
</form>
</div>
</Paper>
</Box>
)
}
To make a button take full width of container, you can set fullWidth prop to true in Button component. For more information you can refer MUI Button API.
Working demo: Demo
Like this:-
<Box
sx={{
display: "flex",
flexWrap: "wrap",
padding: "20px 40px",
"& > :not(style)": {
m: 1,
width: 400,
height: 500
}
}}
>
<Paper
elevation={10}
sx={{
display: "flex",
justifyContent: "center",
flexDirection: "column"
}}
>
<div style={{ paddingTop: 30, textAlign: "center" }}>LOGIN</div>
<div
style={{ paddingTop: 40, display: "flex", justifyContent: "center" }}
>
<form>
<div style={{ paddingTop: 30 }}>
<FormControl variant="standard">
<InputLabel htmlFor="email">Email</InputLabel>
<Input
id="email"
startAdornment={
<InputAdornment position="start">
<PersonIcon />
</InputAdornment>
}
/>
</FormControl>
</div>
<div style={{ paddingTop: 30 }}>
<FormControl variant="standard">
<InputLabel htmlFor="password">Password</InputLabel>
<Input
id="password"
startAdornment={
<InputAdornment position="start">
<KeyIcon />
</InputAdornment>
}
/>
</FormControl>
</div>
<div style={{ paddingTop: 30 }}>
<Button variant="contained" fullWidth>
Accept
</Button>
</div>
<div style={{ paddingTop: 30 }}>
<Button variant="contained" endIcon={<GoogleIcon />} fullWidth>
Login with Google
</Button>
</div>
<div style={{ paddingTop: 30 }}>
<Button variant="contained" fullWidth>
Cancel
</Button>
</div>
</form>
</div>
</Paper>
</Box>
just add full width to 100.
you can add it with a styled component, or inline in sx prop: {width:1}
in sx prop width 1 will be converted to 100% width
see the mui sizing page here
Set attribute of each button: style={{paddingTop: 30, width: "100%"}}

How to make paper responsive - Material Ui

I'm making an app, and I am currently working on making the login page.
I want the login tools to be responsive, centered by width and height. justify-content :
'center' was not working for me, but it seemed to be working with other people's code, so I am not sure what the problem is.
This is the image of the website
My Body Code
<div>
<Paper elevation={10} className={classes.root}>
<Grid align="center">
<h2 className={classes.title}>Log in </h2>
</Grid>
<form onSubmit={this.submitLogin}>
<Paper className={classes.paper}>
<TextField
id="standard-basic"
label="Email"
name="name"
type="text"
value={this.state.name}
onChange={this.handleInputChange}
fullWidth
required
/>
</Paper>
<Paper className={classes.paper}>
<TextField
id="standard-basic"
label="Password"
name="password"
type="password"
value={this.state.password}
onChange={this.handleInputChange}
fullWidth
required
/>
</Paper>
<Typography className={classes.pf}>
<Link href="">Forgot Password?</Link>
</Typography>
<Typography className={classes.pf}>{this.state.text}</Typography>
<Tooltip title="Will Remember You When You Come Back">
<FormControlLabel
control={<Checkbox name="checkedB" color="primary" />}
label="Remember Me"
/>
</Tooltip>
<Button
type="submit"
className={classes.log}
onClick={this.submitLogin}
variant="contained"
fullWidth
>
LOG IN
</Button>
</form>
<Typography className={classes.fp}>
Haven't created an account?
<Tooltip title="Go to the Sign Up page">
<Link href="./register"> Sign Up</Link>
</Tooltip>
</Typography>
</Paper>
</div>
My Theme Code
const styles = (theme) => ({
root: {
padding: 50,
height: 450,
width: 400
},
title: {
fontSize: "30px"
},
paper: {
marginTop: "15px"
},
log: {
background: "#3f51b5",
color: "white",
border: "0px",
borderRadius: "5px",
borderColor: "grey",
fontSize: "20px",
height: "45px",
marginTop: "5%"
},
fp: {
marginTop: "80px",
marginLeft: "65px"
},
pf: {
marginTop: "8px"
}
});
I couldn't really find the 'working' solutions for me, so I'm posting a question
Wrap your Paper component in a div with the styles you mention, that should work as expected:
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
// Change the size to fit the parent element of this div
width: '100%',
height: '100%',
}}>
<Paper>
SomeStuff...
</Paper>
</div>

How to stretch the card according to the content displayed in reactjs?

I'm new to material UI framework, i want to stretch the grid accordingly displayed in the content. I couldn't able to do that. Can anyone help me in this?
<Card>
<CardHeader
avatar={<Avatar aria-label="recipe">S</Avatar>}
title={
<>
<InputBase placeholder="Search Google Maps" margin="normal" />
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
</>
}
/>
<Divider />
<CardContent
style={{ overflow: "scroll" }}
className={classes.contentHeight}
id="chatList"
>
<div>
<Message isSender content="Hello" />
{this.state.data.map(item => {
if (item.isSender) {
return (
<Message isSender name="Sanjana" content={item.content} />
);
}
return <Message name="Sanjana" content={item.content} />;
})}
</div>
</CardContent>
<Divider />
<CardActions>
<Paper className={classes.contentPaper}>
<Input
margin="dense"
className={classes.input}
placeholder="Enter a Message"
disableUnderline
/>
</Paper>
</CardActions>
</Card>
Can anyone help me in this query?
Thanks in advance!
Remove width: 100
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
minHeight: 40,
width: 100,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
{content}
</Card>
should be
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
minHeight: 40,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
{content}
</Card>
because the width: 100 gives it a width of 100px.
To make the content to stretch full width, you can use width: "fit-content" and assign your width value of 100 to minWidth: 100.
So your card will look like,
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
diaplay: "block",
minHeight: 40,
width: "fit-content",
minWidth: 100,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
To make the content left align inside card, you can assign style to Grid like,
<Grid style={{ paddingBottom: 8, textAlign: "left" }} item xs={12}>
<span>{name}</span>
</Grid>
Forked sandbox

Resources