Declined
Last Updated: 26 Jun 2019 14:04 by ADMIN
Nathaniel
Created on: 18 Apr 2019 12:09
Type: Bug Report
0
Popup in AutoComplete Fails Prop Validation

When rendering an AutoComplete, I get the following warning:

Warning: Failed prop type: Invalid prop `children` supplied to `Popup`.
    in Popup (created by ListContainer)
    in ListContainer (created by AutoComplete)
    in span (created by AutoComplete)
    in AutoComplete

I have tried this in the simple case below:

ReactDOM.render(
    <AutoComplete
        className="form-control"
        required={true}
        validationMessage="Location Required." />,
    document.getElementById('root'));
6 comments
ADMIN
Stefan
Posted on: 24 Apr 2019 09:59
Hello, Nathaniel,

After an additional research we found an article that seems to explain the same issue.

Please take a look and I hope it will prove helpful:

http://uidevdaily.com/2018/ie11-error-failed-prop-type-invalid-prop-children-of-type-object/ 

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
ADMIN
Stefan
Posted on: 24 Apr 2019 05:36
Hello, Nathaniel,

When the scripts are used, I can assume that the prop-types are not loaded inside the application.

Could you please loaded the prop types as well to check if this will fix the issue:


Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Nathaniel
Posted on: 23 Apr 2019 15:36
I am attaching a simple example which exhibits this behavior.
Attached Files:
Nathaniel
Posted on: 23 Apr 2019 15:15

Hello Stefan,

I tried your example in my development environment and received no errors.  On further examination I found this difference -- with your example, the react and react-dom packages are being used in the Webpack bundle, whereas my application uses react and react-dom externally.

I have the following in my webpack.config.js file:

module.exports = {
    ...
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
    ...
}

and in my page I include these two modules externally, before including the bundle script:

    <script type="text/javascript" src="<%= ResolveClientUrl("~/node_modules/react/umd/react.development.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveClientUrl("~/node_modules/react-dom/umd/react-dom.development.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveClientUrl("~/Scripts/dist/main.js") %>"></script>

When I do this, the invalid props warning occurs.  Is there a way to use React externally like this and not get the warning?

Thank you,
Nathaniel

ADMIN
Stefan
Posted on: 19 Apr 2019 07:31
Hello, Nathaniel,

Thank you for the report.

I made an example based on the provided code and it is working as expected on my end on IE 11:

https://stackblitz.com/edit/react-rrmzur?file=app/main.jsx

Please take a look at the example and advise if I missed an detail.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Nathaniel
Posted on: 18 Apr 2019 12:14
Tested in IE 11 with @progress/kendo-react-dropdowns@2.9.1