Semantic-ui-react: Props warning with modals

Created on 18 Oct 2016 · 4Comments · Source: Semantic-Org/Semantic-UI-React

Whenever I'm using the Modal component I'm getting the warning:

_warning.js:36_ Warning: Failed prop type: Prop closeOnRootNodeClick in Portal conflicts with props: closeOnDocumentClick. They cannot be defined together, choose one or the other.

Steps

Use code blow:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Header, Image, Modal } from 'semantic-ui-react'

const ModalModalExample = () => (
    <Modal trigger={<Button>Show Modal</Button>}>
        <Modal.Header>Select a Photo</Modal.Header>
        <Modal.Content image>
            <Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
            <Modal.Description>
                <Header>Default Profile Image</Header>
                <p>We've found the following gravatar image associated with your e-mail address.</p>
                <p>Is it okay to use this photo?</p>
            </Modal.Description>
        </Modal.Content>
    </Modal>
)

const mountNode = document.createElement('div')
document.body.appendChild(mountNode)

ReactDOM.render(<ModalModalExample />, mountNode)

Use Webpack with config below to bundle it in a single app.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'assets/build/dop/js');
var APP_DIR = path.resolve(__dirname, 'assets/src/js');

var config = {
  entry: APP_DIR + '/app.js',
  output: {
    path: BUILD_DIR,
    filename: 'app.js'
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      }
    ]
  }
};

module.exports = config;

Use the template to load the app:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}DOP{% endblock %}</title>
    <link rel="stylesheet" href="/static/dop/vendor/semantic.min.css" />
    <link rel="stylesheet" href="/static/dop/css/style.css">
    <script src="/static/dop/vendor/jquery.min.js"></script>
    <script src="/static/dop/vendor/semantic.min.js"></script>
</head>
<body>
    <div class="ui text container">
    <div id="content"></div>
    <script src="/static/dop/js/app.js"></script>
    </div>
</body>
</html>

Expected Result

Button that triggers the modal.

Actual Result

Button that triggers the modal.
Warning: Failed prop type: Prop closeOnRootNodeClick in Portal conflicts with props: closeOnDocumentClick. They cannot be defined together, choose one or the other.
in Portal (created by Modal)
in Modal (created by ModalModalExample)
in ModalModalExample

Version

0.56.4

Testcase

Now, I made this testcase http://codepen.io/anon/pen/ALJxWj, but that does not show this warning. What can be different about the codepen and my code example?

Source

flipvrijn

Most helpful comment

Released in [email protected]

levithomason on 18 Oct 2016

👍2

All 4 comments

This report is superb, thank you. The warnings do not show in the codepen because it is a production build of Semantic-UI-React and warnings only show in development.

I've started the fix in #700 and will merge it soon.

levithomason on 18 Oct 2016

👍1

Released in [email protected]

levithomason on 18 Oct 2016

👍2

I'm still getting the same error .. on version 0.60.9

mshibl on 19 Nov 2016

Running with semantic-ui-react 0.64.0 and for a while I haven't used the closeOnDocumentClick prop, but now I decided to use it again and now I get the following warning:

Warning: Failed prop type: Prop closeOnRootNodeClick in Portal conflicts with props: closeOnDocumentClick. They cannot be defined together, choose one or the other.

Code similar to initial post, but now with the following:

<Modal dimmer="inverted" open={open} onClose={this.onClose} closeOnDocumentClick={true} closeOnEscape={true}></Modal>

flipvrijn on 16 Jan 2017

Was this page helpful?

0 / 5 - 0 ratings