[Solved] Kendo React PanelBar Warning and Drawing Error

[GokuJim]

When using a Kendo React PanelBar in expandMode="single" I am getting the following warning, plus a drawing error: 

Warning: Failed prop type: PanelBar child should be either PanelBarItem or Array of PanelBarItem.
    in PanelBar (created by _temp)

I am rendering the control as seen in this HTML snippet:

return (
 <PanelBar className="filter-bar" expandMode="single">
   <PanelBarItem title={this.state.filterTitle} expanded={this.state.expanded} onSelect={this.handlePanelBarSelect}>
     <form id="filterForm" className="filter-form" onSubmit={this.handleSubmit}>
       <div className="form-row">
         <div className="col">
           <div className="form-group">
             <label>Company:</label>
             <DropDownList
               className="form-control"
               data={this.state.companies}
               textField="text"
               dataItemKey="id"
               onChange={this.handleCompanyChange}
               defaultItem={defaultItemCompany}
               value={this.state.company}
             />
           </div>
         </div>
         <div className="col">
           <div className="form-group">
             <label>Site:</label>
             <DropDownList
               className="form-control"
               data={this.state.sites}
               textField="text"
               dataItemKey="id"
               onChange={this.handleSiteChange}
               defaultItem={defaultItemSite}
               value={this.state.site}
             />
           </div>
         </div>
         <div className="col">
           <div className="form-group">
             <label>Functional Location:</label>
             <DropDownList
               className="form-control"
               data={this.state.functionalLocations}
               textField="text"
               dataItemKey="id"
               onChange={this.handleFuncLocChange}
               defaultItem={defaultItemFunctionalLocation}
               value={this.state.functionalLocation}
             />
           </div>
         </div>
         <div className="col">
           <button title="Filter" ref="filterBtn" className="k-button k-primary" onClick={this.handleFilter}
                   disabled={this.state.filterBtnDisabled}>
             {t('filter')}
           </button>
         </div>
       </div>
     </form>
   </PanelBarItem>
 </PanelBar>
);

Furthermore the downarrow/uparrow icon is drawn in the middle of a grid that follows this control on the page (see attached screenshot).

Attached is the generated code from the browser in a screenshot

 

 

[Stefan]

Hello, James,

Thank you for the code.

I used it to make a sample project, but it was working as expected.

I have attached it here, could you please take a look and it and modify it to show the same issues?

This will allow us to provide a suggest best suited for the issue in the real application.

Regards,
Stefan
Progress Telerik

[GokuJim]

I will do that. And I have further info for you to review regarding this issue that I’ll send you early next week.

[Stefan]

Hello, James,

I will be expecting the additional details and gladly assist further.

Regards,
Stefan
Progress Telerik

[GokuJim]

Here's a few facts that I did not provide originally, (for that I apologize).

1) The PanelBar control was defined within a Kendo GridToolbar control.

2) The issue arises when I am running the code locally through npm (with webpack) using an IDE (WebStorm).

3) The issue does NOT occur when npm building and deploying to another environment.

After reviewing the DOM and how Kendo builds the HTML when running locally out of an IDE and in deployment, I have discovered the issue lays with where k-content is placed within the HTML DOM structure. Attached is a spreadsheet containing the differences in DOM construction.

 

 

[Stefan]

Hello, James,

Thank you for sharing the different rendering.

This is a very strange case because there should not be a difference in the rendering of the component DOM based on the place from where it is deployed.

Could you please check if there are no differences in the application deployed from the IDE? Is it possible to delete to a node_modules folder and install it again to ensure that something is not cached?

If this does not help, could you please send us the project, so we can test it locally. To reduce its size and prevent sharing the actual project, all other components and data can be removed before sending it to us.

Regards,
Stefan
Progress Telerik