Develop Reference

How to open Dropdown within Antd React AutoComplete options?

I have an AutoComplete and it has onSearch event. They are working perfectly. Now, I need to add a dropdown to autocomplete options. The problem is that, when I expect to see opening dropdown, still onSearch is working and dropdown options can't be seen. The thing I am trying to do is that, when user click on dropdown I should show dropdown menu. When user click any other part of the option other than dropdown button, then onSearch should work as expected.
This is autocomplete :
<AutoComplete
dropdownClassName="certain-category-search-dropdown"
dropdownMatchSelectWidth={500}
style={{
width: 250
}}
options={options}
onSelect={onSelect}
>
<Input.Search size="large" placeholder="input here" />
</AutoComplete>
This is renderItem function for options, it has dropdown :
const renderItem = (title, count) => ({
value: title,
label: (
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
{title}
<span>
<Dropdown overlay={menu} trigger={["click"]}>
<span
className="ant-dropdown-link"
onClick={(e) => e.preventDefault()}
>
Click me <DownOutlined />
</span>
</Dropdown>
{count}
</span>
</div>
)
});
This is a simulation of my situation. Also it does not have to be dropdown. When if it is a button or sth the scenario is the same. I could not prevent onSelect running on click.

In my case, I could use 'dropdownRender' props.
dropdownRender={(menu) =>
<>
{menu}
<span
className="ant-dropdown-link"
onClick={(e) => e.preventDefault()}
>
Click me <DownOutlined />
</span>
</>
}
items passed by options props shall be rendered in {menu} above.
Click me buttons shall not close the dropdown menu.

How to embed checkbox with label in Card Media?

I tried to code this thing. But the CardMedia will not go together with the checkbox. so responsive is a failure.
<Card>
<CardMedia
component='img'
alt=''
height='160'
image=''
title='Image'
style={{ backgroundColor: '#DEDBDB',
position: 'relative' }}
/>
{/*<input type='checkbox' id='select'*/}
{/* style={{ position: 'absolute', marginLeft: '20%', marginTop: '-2%'}}*/}
{/*/>*/}
{/*<label htmlFor='select'*/}
{/* style={{ position: 'absolute', marginLeft: '21%', marginTop: '-2.15%'}}*/}
{/*>選択</label>*/}
<Box mt={-6} ml={45}>
<span><Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} /></span>
</Box>
</Card>
I tried also the FormControlLabel for this so that the label and checkbox will be together and style it with position: absolute and some margins so that the result will be like this.
But the problem is that it is not responsive and if using box label disappear.
Thanks.

Ciao, your problem is connected to the zIndex of the label in FormControlLabel. Infact, if you inspect the page you can see the label present on DOM but invisible (maybe because on CardMedia the image is always on top, but this is my personal opinion).
To solve this problem, you can override the style of the label associated to the FormControlLabel. This is a codesandbox example.
At first I defined a CustomCheckbox:
const CustomCheckbox = withStyles((theme) => ({
root: {
// checkbox style example
// color: "#000000"
// '&$checked': {
// color: "#000000",
// },
},
checked: {}
}))((props) => <Checkbox color="default" {...props} />);
Then, I used it into Card:
<Box mt={-6} ml={45}>
<span>
<FormControlLabel
control={
<CustomCheckbox
checked={cheboxChecked}
onChange={handleChange}
name="toggleFavorite"
/>
}
label="Checkbox label" // label value
classes={{
label: styles.formcontrollabel // label class overriding
}}
/>
</span>
</Box>
And finally in makeStyles I made the override:
const useStyles = makeStyles(() => ({
formcontrollabel: {
"&.MuiFormControlLabel-label": {
zIndex: 1
}
}
}));
The result is:
The label is responsive also (in this case "label" word goes on new line if you reduce screen width) as long as possible (if you continue to reduce screen width, label will be cutted). But this is normal (because you defined Box like <Box mt={-6} ml={45}>). If you don't like this behaviour, you could use a Hidden component to hidden checkbox and label if screen goes under a certain breakpoint like:
<Hidden smDown> // if screen width goes under smDown breakpoint, the Hidden content will be hided
...
</Hidden>

onClick doesn't work on first click for MaterialUI FormControl API TextField

In my React app, I am using a MaterialUI Form Control API TextField. In the Select tag, I am firing a method onClick, but it does fire only after first click. I don't have any hidden CSS applied to these tags. Here is the following snippet:
<FormControl style={{ width: '12em', marginTop: '1em' }} variant="outlined">
<InputLabel htmlFor="outlined-age-native-simple">Select Template</InputLabel>
<Select
native
label="Select-Template"
onClick={this.GetTemplates}
>
{templates.length &&
templates.map(x => (
<option
key={x.template_id}
value={JSON.stringify(x.template_content)}
style={{ border: 'solid' }}>
{x.template_name}
</option>
))}
</Select>
</FormControl>
The function:
GetTemplates = e => {
XRayApi.getTemplates(this.getTemplatesApiResponse);
};
I cannot find out the reason at all. Any help on this?

You should use onChange={this.GetTemplates} in your code to get it working. As per the official API docs of material-ui>select, onClick is not available. Now, your code will become
<FormControl style={{ width: '12em', marginTop: '1em' }} variant="outlined">
<InputLabel htmlFor="outlined-age-native-simple">Select Template</InputLabel>
<Select
native
label="Select-Template"
onChange={this.GetTemplates}>
{templates.length &&
templates.map(x => (
<option
key={x.template_id}
value={JSON.stringify(x.template_content)}
style={{ border: 'solid' }}>
{x.template_name}
</option>
))}
</Select>
</FormControl>

Try onChange instead of onClick in Select.
<Select
native
label="Select-Template"
onChange={this.GetTemplates}
>

Change color of Material UI Indeterminate Checkbox

I'm having a hard time applying a color to the indeterminate state of my checkboxes. When fully selected, the checkbox properly displays as the secondary color. Any suggestions on what I'm doing wrong to target the indeterminate state and change its color?
const styles = {
root: {
'&$indeterminate': {
color: 'red',
},
},
indeterminate: {},
};
...
<ListItem
dense
button
key={this.props.key}
className={this.props.className}
disabled={this.props.disabled}
onClick={this.props.onClick}
>
<Checkbox
indeterminate={this.props.indeterminate}
classes={{
root: classes.root,
indeterminate: classes.indeterminate,
}}
disableRipple
tabIndex={-1}
disabled={this.props.disabled}
checked={this.props.checked}
/>
<ListItemText inset primary={this.props.text} />
{ hasChildren ? <ExpansionIcon onClick={this.onExpansionItemClick} /> : null }
</ListItem>
I did it this way based on the documentation here: https://material-ui.com/customization/overrides/#overriding-with-classes
Thanks for your help!

I've found the proper way to implement this. Instead of selecting the root and changing the color, you tell the Checkbox what icon to use and apply a class to the icon.
<Checkbox
indeterminate={this.props.indeterminate}
indeterminateIcon={<IndeterminateCheckBoxIcon className={classes.root} />}
disableRipple
tabIndex={-1}
disabled={this.props.disabled}
checked={this.props.checked}
/>

Material-UI: Full width List inside of Grid

Using material-ui I am trying to make a <List /> inside of a <Grid /> column. I want the list to scroll on overflow but also take up the width of the grid it is in. I can get both of these to work but not at the same time. the first section with the <Grid /> is the overflowY functioning properly but without the full width of the <ListItem />:
const styles = theme => ({
root: {
flexGrow: 1,
},
list: {
flexGrow: 1,
position: 'absolute',
overflow: 'auto',
bottom: '1em',
top: '1em',
},
})
...
<Grid item xs>
<List classes={{ root: classes.list }}>
{genereateData(35).map(item => (
<ListItem button>
<ListItemText primary={item} />
</ListItem>
))}
</List>
</Grid>
...
<List classes={{ root: classes.root }}>
but if I switch the line to the last little bit of code above the full width part works. So why would the flexGrow: 1 work in the root prop but not the list prop, and is there a way to get both? I assume it has to do with position: absolute but I cannot get rid of that. Just looking for a way to get both.
Here is a codesandbox!