Under Review
Last Updated: 15 Aug 2024 07:29 by ADMIN
Ryan
Created on: 15 Aug 2024 02:03
Category: PanelBar
Type: Bug Report
1
There is a bug in PanelBarItem when rendering nested PanelBarItems

There is a bug when rendering nested `PanelBarItem` components into a `PanelBar`. This error began in version 8.0 and still exists in 8.2.0.

In the linked example sandbox, you can see that I am rendering an empty array of children and it causes an error. This used to not cause any issues.

An empty array is needed because we render some `PanelBarItems` that come from an AJAX query and so the children starts off as an empty array until the requests completes.

code sandbox example of bug

Thank you,

Ryan

2 comments
ADMIN
Konstantin Dikov
Posted on: 15 Aug 2024 07:29

Hello Ryan,

Thank you for reaching out to us.

I was able to reproduce the issue using the example that you shared and we will definitely look into it.

As for a temporary workaround, you can use "null" as the initial value and add the array once you have the nested PanelBarItems:

  const [items1, setItems1] = React.useState(null);
  React.useEffect(() => {
    setTimeout(() => {
      setItems1([<PanelBarItem title="Test" />]);
    }, 1500);
  }, []);

  return (
    <div className="panelbar-wrapper">
      <PanelBar>
        <PanelBarItem title={"Projects"}>{items1}</PanelBarItem>
      </PanelBar>
    </div>
  );
};

 

Regards,
Konstantin Dikov
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024

Ryan
Posted on: 15 Aug 2024 02:04

Here is the link to the preview of the running app, if helpful ...

https://c5mwgy.csb.app/