Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Props warning with modals #699

Closed
flipvrijn opened this issue Oct 18, 2016 · 4 comments · Fixed by #700
Closed

Props warning with modals #699

flipvrijn opened this issue Oct 18, 2016 · 4 comments · Fixed by #700

Comments

@flipvrijn
Copy link
Contributor

flipvrijn commented Oct 18, 2016 •
edited
Loading

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?
@levithomason levithomason mentioned this issue Oct 18, 2016
Merged
@levithomason
Copy link
Member

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
Copy link
Member

Released in [email protected]

@flipvrijn flipvrijn mentioned this issue Oct 19, 2016
Closed
@mshibl
Copy link

mshibl commented Nov 19, 2016

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

@flipvrijn
Copy link
Contributor Author

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(customPropTypes): ignore nil and false in disallow() Semantic-Org/Semantic-UI-React
3 participants
@flipvrijn @levithomason @mshibl