reactjsdrop-down-menumaterial-uimaterial-components
Material ui Component "Select" does not set the chosen item. Selected item doesn't stay selected, and it renders very small
I got a help last week and I have 50% working of Select Component of Material ui V.5.0 and React 18.0. The list of Select is working properly with map function. The thing is that the selected item doesn't show, it doesn't stay selected. Also the size of the Select component is not accepting the width format. I've tried, Box and sx={{}}, and none of them worked. Please all helps will be very appreciated.
// Select is down bellow almost at the end. Above the button.
import React, { useState } from 'react';
import { Container } from '@mui/material';
import { Typography } from '@mui/material';
import { Box } from '@mui/material';
import { TextField } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { Button } from '@mui/material';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import Grid from '@mui/material/Grid';
// import Controls from '../components/Controls';
import Select from '../components/Select';
const initialValues = {
id: 0,
fullName: '',
address: '',
local: '',
city: '',
CEP: '',
phone: '',
contact: '',
email: '',
numBank: '',
branch: '',
account: '',
balance: '',
date: '',
stateId: '',
}
const useStyles = makeStyles((theme) => {
return{
root: {
display: "flex",
flexwrap: "wrap",
},
textField: {
margimLeft: theme.spacing(1),
margimRight: theme.spacing(1),
width: "25ch",
},
field: {
spacing: 2,
display: "block",
}
}
});
export default function Bancos(){
const classes = useStyles()
const [fullName, setFullName] = useState('');
const [address, setAddress] = useState('');
const [fullNameError, setFullNameError] = useState(false);
const [addressError, setAddressError] = useState(false);
const [numBank, setNumBank] = useState('');
const [branch, setBranch] = useState('');
const [account, setAccount] = useState('');
const [numBankError, setNumBankError] = useState(false);
const [branchError, setBranchError] = useState(false);
const [accountError, setAccountError] = useState(false);
const [ values, setValues ] = useState(initialValues);
const handleInputChange = e => {
const { name, value } = e.target
setValues({
...values,
[name]: value
})
}
const handleSubmit = (e) => {
e.preventDefault()
setFullNameError(false)
setAddressError(false)
if(fullName == ''){
setFullNameError(true)
}
if( address == ''){
setAddressError(true)
}
if ( numBank == ''){
setNumBankError(true)
}
if (branch == ''){
setBranchError(true)
}
if (account == ''){
setAccountError(true)
}
}
return(
<Container>
<form noValidate autoComplete="off" onSubmit={handleSubmit}>
<Typography variant="h6" color="textSecondary" align="center" gutterBottom
className="titleBank">
Cadastro de Bancos
</Typography>
<Grid container spacing={2}>
<Box mt={3} mb={1}> {/* colocar margim top e bottom com box */}
<Grid item xs={6} md={6}>
<TextField label="Nome do Banco" variant="outlined" color="secondary"
sx={{width: "430px", ml: 2}} required className={classes.field} name="fullName"
value={values.fullName} error={ fullNameError }
onChange={ handleInputChange }/>
</Grid></Box>
<Box mt={1}>
<Grid item xs={6} md={10} style={{ display: "flex" }}>
<TextField label="Endereço" variant="outlined" color="secondary"
sx={{width: "650px", mr: 1, ml: 2}} required className={classes.field} name="address"
value={values.address}
onChange={handleInputChange} error={addressError}/>
<TextField label="Bairro" className={classes.textField} name="local"
sx={{width: "350px" }} value={ values.local }
onChange={ handleInputChange } />
</Grid></Box>
<Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
<TextField label="Cidade" className={classes.field} name="city"
sx={{width: "320px", mr: 1 }} value={values.city}
onChange={ handleInputChange } />
<TextField label="CEP" className={classes.field} name="CEP"
sx={{width: "180px", mr: 1}} value={ values.CEP }
onChange={ handleInputChange }/>
<TextField label="Contato" className={classes.field} name="contact"
sx={{width: "350px", mr: 1 }} value={ values.contact}
onChange={ handleInputChange } />
</Grid>
<Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
<TextField label="Telefone" className={classes.field} name="phone"
sx={{width: "235px", mr: 1 }} value={ values.phone }
onChange={ handleInputChange } />
<TextField label="Celular" className={classes.field} name="phone"
sx={{width: "235px", mr: 1 }} value={ values.phone }
onChange={ handleInputChange } />
<TextField label="E-mail" className={classes.field} name="email"
sx={{width: "350px", mr: 1 }} value={values.email}
onChange={ handleInputChange } />
</Grid><br/>
<Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
<Box width="150px">
<Select sx={{width: "150px", mr: 1 }}
name="state"
label="Estado"
value={values.stateId}
onChange={handleInputChange}
options={Select.choices}
fullWidth
/> </Box>
<TextField label="Nº do Banco" className={classes.field} required
sx={{width: "100px", mr: 1 }} name="numBank" value={values.numBank}
onChange={ handleInputChange } error={ numBankError } />
<TextField label="Nº Agência" className={classes.field} name="branch"
sx={{width: "150px", mr: 1 }} value={ values.branch } required
onChange={ handleInputChange } error={ branchError } />
<TextField label="Nº Conta Corrente" className={classes.field} name="account"
sx={{width: "250px", mr: 1 }} value={ values.account } required
onChange={ handleInputChange } error={ accountError } />
<TextField label="Saldo R$" className={classes.field} name="balance"
sx={{width: "180px", mr: 1 }} value={ values.balance }
disabled />
</Grid><br/>
<Grid item xs={6} md={8} style={{ display: "flex" }}>
<Box mt={4}> {/* colocar margim top e bottom com box */}
<Button type="submit" variant="contained" color="primary"
endIcon={<KeyboardArrowRightIcon />}
>
Salvar
</Button>
</Box>
</Grid>
</Grid>
</form>
</Container>
)
}import React from 'react'
import {FormControl, InputLabel, Select as MuiSelect, MenuItem } from '@mui/material';
// Selection of a State in Brazil
export default function Select(props) {
const choices = () => ([
{ id: '1', title: 'Acre'},
{ id: '2', title: 'Alagoas'},
{ id: '3', title: 'Amazonas' },
{ id: '4', title: 'Amapá' },
{ id: '5', title: 'Bahia' },
{ id: '6', title: 'Distrito Federal'},
{ id: '7', title: 'Espírito Santo' },
{ id: '8', title: 'Mato Grosso do Sul'},
{ id: '9', title: 'Mato Grosso'},
{ id: '10', title: 'Rio de Janeiro'},
{ id: '11', title: 'São Paulo' },
{ id: '12', title: 'Minas Gerais'},
{ id: '13', title: 'Paraná' },
]);
const { name, label, value, onChange } = props;
return (
<FormControl variant="outlined">
<InputLabel>{label}</InputLabel>
<MuiSelect label={label} name={name} value={value} onChange={onChange}>
<MenuItem value="">none</MenuItem>
{
choices().map(
item => (<MenuItem key={item.id} value={item.id}>{item.title}</MenuItem>)
)
}
</MuiSelect>
</FormControl>
)
}Solution
About your question, the Select component width you could add fullWidth for FormControl in your Select component and about the selected item doesn't select problem, I revise your data structure and code and provide all below, you can try it, hope this can help you.
// Select is down below almost at the end. Above the button.
import React, { useState } from 'react';
import { Container } from '@mui/material';
import { Typography } from '@mui/material';
import { Box } from '@mui/material';
import { TextField } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { Button } from '@mui/material';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import Grid from '@mui/material/Grid';
// import Controls from '../components/Controls';
import Select from '../components/Select';
const initialValues = { id: '', title: ''}
const useStyles = makeStyles((theme) => {
return{
root: {
display: "flex",
flexwrap: "wrap",
},
textField: {
margimLeft: theme.spacing(1),
margimRight: theme.spacing(1),
width: "25ch",
},
field: {
spacing: 2,
display: "block",
}
}
});
export default function Bancos(){
const classes = useStyles()
const [fullName, setFullName] = useState('');
const [address, setAddress] = useState('');
const [fullNameError, setFullNameError] = useState(false);
const [addressError, setAddressError] = useState(false);
const [numBank, setNumBank] = useState('');
const [branch, setBranch] = useState('');
const [account, setAccount] = useState('');
const [numBankError, setNumBankError] = useState(false);
const [branchError, setBranchError] = useState(false);
const [accountError, setAccountError] = useState(false);
const [values, setValues] = useState(initialValues);
const handleInputChange = e => {
const { name, value } = e.target
setValues({id: e.target.value})
}
const handleSubmit = (e) => {
e.preventDefault()
setFullNameError(false)
setAddressError(false)
if(fullName == ''){
setFullNameError(true)
}
if( address == ''){
setAddressError(true)
}
if ( numBank == ''){
setNumBankError(true)
}
if (branch == ''){
setBranchError(true)
}
if (account == ''){
setAccountError(true)
}
}
return(
<Container>
<form noValidate autoComplete="off" onSubmit={handleSubmit}>
<Typography variant="h6" color="textSecondary" align="center" gutterBottom
className="titleBank">
Cadastro de Bancos
</Typography>
<Grid container spacing={2}>
<Box mt={3} mb={1}> {/* colocar margim top e bottom com box */}
<Grid item xs={6} md={6}>
<TextField label="Nome do Banco" variant="outlined" color="secondary"
sx={{width: "430px", ml: 2}} required className={classes.field} name="fullName"
value={values.fullName} error={ fullNameError }
onChange={ handleInputChange }/>
</Grid></Box>
<Box mt={1}>
<Grid item xs={6} md={10} style={{ display: "flex" }}>
<TextField label="Endereço" variant="outlined" color="secondary"
sx={{width: "650px", mr: 1, ml: 2}} required className={classes.field} name="address"
value={values.address}
onChange={handleInputChange} error={addressError}/>
<TextField label="Bairro" className={classes.textField} name="local"
sx={{width: "350px" }} value={ values.local }
onChange={ handleInputChange } />
</Grid></Box>
<Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
<TextField label="Cidade" className={classes.field} name="city"
sx={{width: "320px", mr: 1 }} value={values.city}
onChange={ handleInputChange } />
<TextField label="CEP" className={classes.field} name="CEP"
sx={{width: "180px", mr: 1}} value={ values.CEP }
onChange={ handleInputChange }/>
<TextField label="Contato" className={classes.field} name="contact"
sx={{width: "350px", mr: 1 }} value={ values.contact}
onChange={ handleInputChange } />
</Grid>
<Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
<TextField label="Telefone" className={classes.field} name="phone"
sx={{width: "235px", mr: 1 }} value={ values.phone }
onChange={ handleInputChange } />
<TextField label="Celular" className={classes.field} name="phone"
sx={{width: "235px", mr: 1 }} value={ values.phone }
onChange={ handleInputChange } />
<TextField label="E-mail" className={classes.field} name="email"
sx={{width: "350px", mr: 1 }} value={values.email}
onChange={ handleInputChange } />
</Grid><br/>
<Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
<Box width="150px" sx={{ mr: 1 }}>
<Select
name="state"
label="Estado"
value={values.id}
onChange={handleInputChange}
options={Select.choices}
fullWidth
/> </Box>
<TextField label="Nº do Banco" className={classes.field} required
sx={{width: "100px", mr: 1 }} name="numBank" value={values.numBank}
onChange={ handleInputChange } error={ numBankError } />
<TextField label="Nº Agência" className={classes.field} name="branch"
sx={{width: "150px", mr: 1 }} value={ values.branch } required
onChange={ handleInputChange } error={ branchError } />
<TextField label="Nº Conta Corrente" className={classes.field} name="account"
sx={{width: "250px", mr: 1 }} value={ values.account } required
onChange={ handleInputChange } error={ accountError } />
<TextField label="Saldo R$" className={classes.field} name="balance"
sx={{width: "180px", mr: 1 }} value={ values.balance }
disabled />
</Grid><br/>
<Grid item xs={6} md={8} style={{ display: "flex" }}>
<Box mt={4}> {/* colocar margim top e bottom com box */}
<Button type="submit" variant="contained" color="primary"
endIcon={<Link />}
>
Salvar
</Button>
</Box>
</Grid>
</Grid>
</form>
</Container>
)
}import React from 'react'
import {FormControl, InputLabel, Select as MuiSelect, MenuItem } from '@mui/material';
// Selection of a State in Brazil
export default function Select(props) {
const choices = () => ([
{ id: '0', title: 'none'},
{ id: '1', title: 'Acre'},
{ id: '2', title: 'Alagoas'},
{ id: '3', title: 'Amazonas' },
{ id: '4', title: 'Amapá' },
{ id: '5', title: 'Bahia' },
{ id: '6', title: 'Distrito Federal'},
{ id: '7', title: 'Espírito Santo' },
{ id: '8', title: 'Mato Grosso do Sul'},
{ id: '9', title: 'Mato Grosso'},
{ id: '10', title: 'Rio de Janeiro'},
{ id: '11', title: 'São Paulo' },
{ id: '12', title: 'Minas Gerais'},
{ id: '13', title: 'Paraná' },
]);
const { name, label, value, onChange } = props;
return (
<FormControl variant="outlined" fullWidth>
<InputLabel>{label}</InputLabel>
<MuiSelect label={label} name={name} value={value} onChange={onChange}>
{
choices().map(
item => (<MenuItem key={item.id} value={item.id}>{item.title}</MenuItem>)
)
}
</MuiSelect>
</FormControl>
)
}When I run the code I changed, the component working well like this:
- Matching pair-wise columns from left to right across rows in one dataframe to another dataframe and adding new columns with matching values
- color mapping in geom_conn_bundle not showing correctly
- Print R package startup message AFTER automatic package conflict messages instead of before
- Summing a set of R dataframe rows (column-wise), while retaining the first n columns
- Added variable / partial regression plots for groups in an interaction?
- how to make a topoplot in R with coordinates variable distribution
- List of all functions in base R?
- Plotting multiple plots for different initial conditions in one graph
- Printing repetitively on the same line in R
- Generating UI/Server based on initial selection
- Subset dataframe based on pickerInput
- How to let user pick the data in R-shiny?
- Couldn't show my simple bar charts separately on Shiny R dashboardBody
- How to programmatically filter contents of a second shiny app displayed via iframe
- How to select specific interesting groups for the boxplot in R Shiny app?
- Crosstable and Plot grouping with reactive values
- Is there a way to make multiple Shiny picker inputs where the selections must be disjoint?
- Delay/avoid duplication of shiny server side functions until after credentials
- Predictions only returns value "1"
- How to display a busy indicator in a shiny app?
- Append doesn't work when writing to CSV in R
- Changing the start date of a gantt chart in DiagrammeR
- Check for installed packages before running install.packages()
- Compare two columns element-wise
- For loop is several times faster in R than in Python using the rpy2 library
- Setting a flag based on two samples' dates
- How to bring pop-ups for long text string selection items forward in front of modal they are rendered from when using virtualSelectInput()?
- R data.table update join by reference the, but updating the RIGHT table
- How to add tooltip labels in R Sparkline?
- How to draw circles (circular dots) from linetype in ggplot2