ReferenceArrayInput ignores withStyles and doesn't have fixed size of width by default

What you were expecting:

either be able to set width with withStyles or it shouldn’t be width: 100%/ display:flex all the time demo here shows chips that wrap: https://github.com/TeamWertarbyte/material-ui-chip-input

What happened instead:

chips are floating left to each other ever-expanding the screen size

Steps to reproduce: Here is a codesandbox that I tried to use withStyles without any result: https://codesandbox.io/s/1oj3j8yj0j - please click on a post and try to add as many tags as possible to see the effect

Related code:

import { withStyles } from '@material-ui/core/styles';


const styles = {
    maxInputSize: {  
        maxWidth: 600,
        width: 600,
    },
};

const MaxWidthReferenceArrayInput =  withStyles(styles)(
    ({ classes, ...props }) => 
    <ReferenceArrayInput label="Tasks" source="tasks" reference="tasks" 
        allowEmpty={true} className={classes.maxInputSize} {...props}>
        <AutocompleteArrayInput optionText="alias" className={classes.maxInputSize}
            options={{ allowDuplicates:false}}/>
    </ReferenceArrayInput>
);

[...]
<MaxWidthReferenceArrayInput/>
[...]

Other information: days ago was posted here as well: https://stackoverflow.com/questions/52915392/how-to-set-maxwidth-in-referencearrayinput

[eaverdeja]

Hey there @zifnab87! I had the same exact problem and stumbled on this issue. I managed a way through it using the classes prop and nested selectors:

import { withStyles } from '@material-ui/core/styles'

const styles = {
    chip: {
        margin: '3px'
    },
    container: {
        '& div': {
            flexWrap: 'wrap',
            marginTop: '18px'
        },
        marginBottom: '8px'
    }
}

export const myAutocompleteArrayInput = withStyles(styles)(({ source, classes }) =>
    <AutocompleteArrayInput
        source={source}
        optionText="nome"
        classes={classes}
    />
)

Hope it also works for you!

[zifnab87]

@eaverdeja this worked great! more specifically I did:

const styles = {
    chip: {
        margin: '3px',
    },
    container: {
        '& div': {
            flexWrap: 'wrap',
            marginTop: '18px',
            maxWidth: '400px'
        },
        marginBottom: '8px'
    }
}

export const myAutocompleteArrayInput = withStyles(styles)(({ source, classes }) =>
    <AutocompleteArrayInput
        source={source}
        optionText="nome"
        classes={classes}
    />
)