Build version not compatible with Material UI

[Cozloschi]

Expected Behavior

Hello, I am using your multi select component in a project which uses Material UI. On the development server everything looks like expected:

When I am using production build, everything looks the same except the component which uses your component:

Do you have any ideea why this happens? Thank you in advance.

Steps to Reproduce the Problem

1. Add material ui to a project
2. Insert your component into a dialog box
3. Open dialog box

Specifications

• Version: 1.0.6
• Platform: MacOS

[talyak]

I am checking it, can u please add code example how do you try to use it?

[Cozloschi]

Thank you for your reply.
Here's an example of my render function:

render() {
        return (
            <div>
                <Dialog
                    open={this.props.open}
                    aria-labelledby="form-dialog-title"
                    className={this.props.className}
                    fullWidth={true}
                    maxWidth={this.props.maxWidth}
                >
                    <DialogTitle id="form-dialog-title">{this.props.dialogTitle}</DialogTitle>
                    <DialogContent>
                        {this.props.dialogText ? <DialogContentText>
                            {this.props.dialogText}
                        </DialogContentText> : null}
                        {this.renderFields()}
                        {this.props.multiSelect && <MultiSelect
                            wrapperClassName='modalBoxMultipleSelect'
                            items={this.props.multiSelectItems}
                            selectedItems={this.state.selectedItems}
                            onChange={items => this.handleChangeSelectItem(items)}
                        />}
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleClose} color="primary">
                            Cancel
                        </Button>
                        <Button onClick={() => this.saveChanges()} color="primary">
                            {this.props.submitButtonText}
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        )
    }

I've seen that your project uses Material UI also, and from what I've read there might be css conflicts if there's two instances of material UI on the same project.
marmelab/react-admin#1782

I will try using Material UI as a peer dependency.

[talyak]

update me please.

[Cozloschi]

Using Material Ui as a peer dependency didn't work.
But wrapping my entire project in a JssProvider component did the trick.
marmelab/react-admin#1782 (comment)

import JssProvider from 'react-jss/lib/JssProvider';

export default () => (
    <JssProvider generateClassName={generateClassName}>
        <App />
    </JssProvider>
);

I think that we should consider wrapping your project in a JssProvider, maybe this way won't be any conflicts in the future with other projects using Material UI.

[uikenshoo]

Thank you @Cozloschi for bringing this to our attention.
We hope to release a new version soon that will ensure that material ui is a proper peer dependency and will use whatever version you've provided in your application.

You are also more then welcomed to provide a solution beforehand, any contribution would be greatly appreciated.

[orShapira]

Same issue here! would love to have a fix soon 👍

[liorheber]

Sorry about the delay in handling this.
I think we can commit to fixing this next week.

[orShapira]

is there any news with this issue? I'm literally unable to use this component.
and it was a really good one before!

[Zidanela]

any updated?

[Zidanela]

we've been waiting for the bug fix :(.

[liorheber]

Hi, hopefully this PR will provide the fix.
#126
Should be merged today.

[liorheber]

Please give v1.0.67 and let us know how it goes.

Thanks!

[orShapira]

Hi, this issue is still going

1. it damaged other material-ui components behavior - such as Dialog and more...
2. it's behavior and look itself are not as good as the development environment

• the alignment of the checkboxes is disordered and when I click its acting without correlation to my click
• the dialog buttons stopped working
• the design of the modal changed when I use the react-multi-select

[liorheber]

@orShapira what material ui version are you using?

[orShapira]

@liorheber
my stable production work with @material-ui/core:3.1.2
but I also upgraded the staging environment to @material-ui/core:3.9.2 and it also didn't work

[liorheber]

Well the dependency for our component is currently material-ui/core@1.0.0 so there's a good chance this is the cause.
@yegor-babiy is planning on looking into this this coming week and there's a good chance we'll update the dependency if that proves to be the root cause.
We will update as soon as possible but you are also welcomed to give it a try.

[yegor-babiy]

@orShapira could you please supply a live code example,
because we still can't reproduce issue on our end.

[samuelrego]

Hi, I am using material ui 3.9.2 version. but multi-select library uses 1.0 version. it's giving me a lot of errors. is there any solution for this??

[yegor-babiy]

@samuelrego thanks for feedback,
could you please provide more details, which errors you got, that we had ability to reproduce such issue.

[baptwaels]

I've tried with v1.0.71 using material-ui v1.3.0, still having the issue

Edit: I've used a JSSProvider instead (custom generateClassName), it works like a charm. Thanks :)

[giancarlobianchi12]

Same problem here ! Any solution in production mode ?
I'm using
"@kenshooui/react-multi-select": "^1.1.3",
"@material-ui/core": "^3.9.3",

[ekinertac]

problem still exists

"@kenshooui/react-multi-select": "^1.1.6",
"@material-ui/core": "^4.11.0",

[rickyalmeidadev]

@ekinertac I am facing the same problem on the same versions. Did you find any solution?