<Select
value={text}
onChange={handleChange}
label={formatMessage(messages.dateFilter)}
input={
<Box display="flex" className={classes.input}>
<Calendar />
<Typography variant="caption">{text}</Typography>
</Box>
}
>
{items.map(entity => {
return (
<MenuItem value={entity.text}>
<Box display="flex" justifyContent="space-between">
<Typography variant="caption">{entity.text}</Typography>
{text === entity.text && <CheckMark />}
</Box>
</MenuItem>
)
})}
</Select>
As you can see I try to override input property in Select list , but now when I click on this field it doesn't open select list popup. I've also tried to use open property (set it to true), but it also doesn't work. How can I solve it ?
"#material-ui/core": "4.5.2",
Related
I have a menu which applies filter to my list and when I click on an element inside the menu is closing and I can not set more filters. I should click the stepper or the selection box many times and the menu should close on click on submit or cancel and not on click of stepper or selection box
`
<Menu matchWidth={true} isOpen={isOpen} onOpen={handleOpen} onClose={handleCancel} closeOnBlur={false} closeOnSelect={false} >
<ChakraSelectButton headline={'Who?'} information={information} />
<MenuList p={4} onClick={e => e.stopPropagation()} >
<VStack
alignItems={'flex-start'}
// #ts-ignore
ref={ref}
<Stepper
title={'How many people?'}
handleChange={handleChange}
name={people}
value={numberOfPeople ? numberOfPeople : 0}
boxSize={10}
/>
{numberOfPeople > 0 && (
<VStack w={'100%'} onClick={e => e.preventDefault()}>
<Text
alignSelf={'flex-start'}
Please insert the age!
</Text>
{Array.from(Array(numberOfPeople)).map((a, idx) => {
return (
<Select
key={idx}
userSelect={'none'}>
<option value={24}>24</option>
<option value={25}>25</option>
<option value={26}>26</option>
<option value={27}>27</option>
</Select>
);
})}
</VStack>
)}
<Stepper
title={'Pets'}
handleChange={handleChange}
value={numberOfPets ? numberOfPets : 0}
boxSize={10}
/>
<Divider />
<CtaFilterButtons
size={'sm'}
handleCancel={handleCancel}
handleFilterChange={handleSubmit}
/>
</VStack>
</MenuList>
</Menu>
`
I only want to close the menu when I click on submit.
I am working with 2 dropdown menus using stopPropogation to prevent the menu shifting up and down when items are checked and unchecked.
One menu works great but the other is still jumping up and down when checking and unchecking items, although I am confident that I'm using stopPropogation in the same way for both instances. I am wondering what I am doing wrong in the faulty dropdown menu that's causing this issue.
Working dropdown menu:
return (
<div onClick={(e) => {
e.stopPropagation();
}}>
<FormControl
variant="outlined"
size="small"
className={classes.formControl}
>
<InputLabel id="demo-mutiple-checkbox-label" align="left" margin="dense">
Select Models
</InputLabel>
<Select
multiple
labelId="demo-mutiple-checkbox-label"
label="SelectModels"
value={modelIds}
onChange={handleChange}
renderValue={(selected) =>
selected
.map(
(id) =>
deviceModelData.find((model) => model.alg_id === id).alg_name
)
.join(', ')
}
MenuProps={MenuProps}
className={classes.rootSelect}
>
{deviceModelData.map((model, index) => (
<MenuItem key={model.alg_id} value={model.alg_id}>
<Checkbox checked={modelIds.includes(model.alg_id)} />
<ListItemText primary={model.alg_name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}
Problematic dropdown menu:
return (
<div
onClick={(e) => {
e.stopPropagation();
}}
>
<FormControl
variant="outlined"
size="small"
className={classes.formControl}
>
<InputLabel id="demo-mutiple-checkbox-label">Select Classes</InputLabel>
<Select
labelId="demo-mutiple-checkbox-label"
label={label}
id="demo-mutiple-checkbox"
multiple
value={classIds}
onChange={handleClassIdsChange}
renderValue={(selected) =>
selected
.map((id) => marketplaceModelClasses[id].original_label)
.join(', ')
}
MenuProps={MenuProps}
>
{allClassIds.map((classId) => {
return (
<MenuItem key={classId} value={classId}>
<Checkbox
value={classId}
checked={classIds.indexOf(classId) > -1}
/>
<ListItemText
primary={marketplaceModelClasses[classId].original_label}
/>
</MenuItem>
);
})}
</Select>
</FormControl>
</div>
);
}
I am using React-admin to make an application to manage articles and have many people logged in to write articles
I want to pass the USER_ID who is logged in to React-admin to CREATED_BY of API backend when posting a Article
Here is the code example for the add a Post function
export const PostCreate = (props) => {
return (
<Create {...props}>
<PostForm></PostForm>
</Create>)
};
const PostForm = (props ) => (
<FormWithRedirect
{...props}
render={(formProps) => (
// here starts the custom form layout
<form>
<Box p="1em">
<Box display="flex">
<Box flex={2} mr="1em">
<Typography variant="h6" gutterBottom>
Offer
</Typography>
<Box display="flex">
<TextInput source="title" fullWidth />
</Box>
<TextInput source="slug" fullWidth />
<ImageInput
source="pictures"
label="Related pictures"
accept="image/*"
fullWidth
>
<ImageField source="image" title="title" />
</ImageInput>
<TextInput multiline source="description" fullWidth />
<MarkdownInput source="content" fullWidth></MarkdownInput>
<Box mt="1em" />
<Typography variant="h6" gutterBottom>
Address
</Typography>
<Box display="flex">
<Box flex={1} mr="0.5em">
<BooleanInput label="Featured" source="featured" />
</Box>
<Box flex={1} mr="0.5em">
<BooleanInput label="Publish" source="published" />
</Box>
</Box>
</Box>
</Box>
</Box>
<Toolbar>
<Box display="flex" justifyContent="space-between" width="100%">
<SaveButton
saving={formProps.saving}
handleSubmitWithRedirect={formProps.handleSubmitWithRedirect}
redirect={
redirectEdit ? redirectEdit : `/posts/${formProps.record.id}`
}
/>
<DeleteButton
record={formProps.record}
redirect={`/posts/`}
/>
</Box>
</Toolbar>
</form>
)}
/>
)
I tried to get UserId from useGetIdentity
import { useGetIdentity } from "react-admin";
but don't know how to pass the value in
export const PostCreate = (props) => {
const { identity } = useGetIdentity();
return (
<Create {...props}>
<PostForm defaultValue={{ user_id: identity }}></PostForm>
</Create>)
};
I'm trying to render certain inputs if a variable is true but when the component render displays the warning Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Select)`, expected a ReactNode.
Here is the code of the Material-ui Dialog which receive some props, one of them is the one that I validate to show or not a pair of select inputs.
What I'm doing is validate if the variable is true, show them if not, don't show them.
states...
requests...
onSubmit...
return (
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
<Collapse in={open}>
<Alert severity={severity}>{alertMsg}</Alert>
</Collapse>
<DialogTitle>Proceso de factura.</DialogTitle>
<DialogContent>
<Container>
<TextField
autoFocus
margin="dense"
id="vus"
name="vus"
label="Valor unitario de servicio."
fullWidth
variant="outlined"
onChange={handleChange}
value={vus}
/>
<TextField
margin="dense"
id="discount"
name="discount"
label="Descuento"
fullWidth
variant="outlined"
onChange={handleChange}
value={discount}
/>
<TextField
margin="dense"
id="paymentMeth"
name="paymentMeth"
label="Método de pago"
fullWidth
variant="outlined"
onChange={handleChange}
value={paymentMeth}
/>
<TextField
margin="dense"
id="payment"
name="payment"
label="Forma de pago"
fullWidth
variant="outlined"
onChange={handleChange}
value={payment}
/>
{requiresCCP ? (
<>
<Box className={classes.formInputs}>
<FormControl fullWidth>
<InputLabel id="select-vehicle">
Vehículo
</InputLabel>
<Select
labelId="select-vehicle"
id="vehicleSelect"
name="vehicleSelect"
value={vehicle}
label="Vehículo"
onChange={handleChange}
>
{allVehicles.map((vehicle, index) => {
return (
<MenuItem
value={vehicle._id}
key={index}
>
{vehicle.PlateNumber} -{" "}
{vehicle.VehicleName} Modelo{" "}
{vehicle.Model}
</MenuItem>
);
})}
</Select>
</FormControl>
</Box>
<Box className={classes.formInputs}>
<FormControl fullWidth>
<InputLabel id="select-contact">
Contacto
</InputLabel>
<Select
labelId="select-contact"
id="contactSelect"
name="contactSelect"
value={contact}
label="Contacto"
onChange={handleChange}
>
value={contact}
onChange={handleChange}
{allContacts.map((contact, index) => {
return (
<MenuItem
value={contact._id}
key={index}
>
{contact.LastNameFather}{" "}
{contact.LastNameMother}{" "}
{contact.FirstName} -{" "}
{contact.OfficialNumber}
</MenuItem>
);
})}
</Select>
</FormControl>
</Box>
</>
) : (
""
)}
</Container>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancelar</Button>
<Button variant="contained" type="submit">
Completar viaje
</Button>
</DialogActions>
</Box>
);
};```
Children you are passing inside the sectect element is incorrect. Just remove value and onchange from its children as you are already passing them as props
<Select
labelId="select-contact"
id="contactSelect"
name="contactSelect"
value={contact}
label="Contacto"
onChange={handleChange}
>
{allContacts.map((contact, index) => {
return (
<MenuItem
value={contact._id}
key={index}
>
{contact.LastNameFather}{" "}
{contact.LastNameMother}{" "}
{contact.FirstName} -{" "}
{contact.OfficialNumber}
</MenuItem>
);
})}
</Select>
If you are working with dates and passing them down as {item.date}
then instead use {item.date.toLocaleDateString()} or {item.date.toString()}
{item.date.toLocaleDateString()} or {item.date.toString()} - This worked for me
<Select
labelId="select-contact"
id="contactSelect"
name="contactSelect"
value={contact}
label="Contacto"
onChange={handleChange}
{allContacts.map((contact, index) => {
return (
<MenuItem
value={contact._id}
key={index}
>
{contact.LastNameFather.toString()}{" "}
{contact.LastNameMother.toString()}{" "}
{contact.FirstName.toString()} -{" "}
{contact.OfficialNumber.toString()}
</MenuItem>
);
})}
Just add toString()
I'm using the multi-select with checkboxes from material ui v4. The provided default settings display an array of 'SELECTED' values. renderValue={selected => selected.join(', ')}. However, I would like to remove this function and only display a permanent label. It seems that the display value is being tied to the value of the component itself. Does anybody knows how to work around this?
<FormControl className={classes.formControl}>
<InputLabel htmlFor="select-multiple-checkbox">Tag</InputLabel>
<Select
multiple
value={personName}
onChange={handleChange}
input={<Input id="select-multiple-checkbox" />}
renderValue={selected => selected.join(', ')}
MenuProps={MenuProps}
>
{names.map(name => (
<MenuItem key={name} value={name}>
<Checkbox checked={personName.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
Are you saying that you don't want any indication of what the selected values are?
If so, below is one way of doing that:
<FormControl className={classes.formControl}>
<InputLabel shrink={false} htmlFor="select-multiple-checkbox">
Tag
</InputLabel>
<Select
multiple
value={personName}
onChange={handleChange}
input={<Input id="select-multiple-checkbox" />}
renderValue={() => (
<span dangerouslySetInnerHTML={{ __html: "" }} />
)}
MenuProps={MenuProps}
>
{names.map(name => (
<MenuItem key={name} value={name}>
<Checkbox checked={personName.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
<InputLabel shrink={false}
This prevents the label from shrinking and moving up when the Select is focused.
renderValue={() => (<span dangerouslySetInnerHTML={{ __html: "" }} />)}
This causes a zero-width space to be rendered as the "selected values". This ensures that the height doesn't collapse (which is what happens if you just return empty string) while still allowing the label to be displayed.