Tab content not updating

[Gareth]

Hi,

I've been having trouble for a few weeks with tab panel content not updating when props change.  I've created the following to demonstrate the problem:

https://codesandbox.io/s/weathered-feather-28c1t

I've created 2 tabs to try different methods of passing props (based on info you have given in this forum) but none of them seem to work.

In the above example the tab content should update (i.e. display the number of selected shapes) when the shape selection in the diagram is changed.

You will notice that tab 1 does not update at all and tab 2 actually loses it's content completely when the shape selection is changed

Thanks for your thoughts,

[Satheesh Kumar Balasubramanian]

Hi Gareth, 

  

Greetings from Syncfusion Support..! 

  

We have validated your reported query at our end. But we couldn’t select any shapes and it is not changed in the diagram in your shared sample. Also, when we switch to second tab it's content is not removed. kindly share the below details to serve you better? 

• Share the issue replicating steps

• Share the issue depicting video
  

Regards, 

Satheesh Kumar B 

[Gareth]

Hi ,

To replicate the issue:

1.  Visit https://28c1t.csb.app/

1. Drag a shape from the left side and place onto the grid.  When this shape is selected on the grid, the number of selected shapes should update from '0' to '1' in the right hand panel.

2. Click elsewhere on the grid to deselect the shape (the number of selected shapes should now be '0'.)

3 Now select tab 2 on the right panel.  Select and then deselect the shape on the grid -you will notice the the number of selected shapes does not change and the content of the tab is replaced by [object Objects]

Thanks

[Satheesh Kumar Balasubramanian]

Hi Gareth,

Thanks for your update.

We have validated your reported query at our end and modified your shared sample to meet your requirement which can be viewed from the following link. In the below sample we have used tabs refresh method in drop and click event of Diagram component to resolve the reported issue.

Sample: https://codesandbox.io/s/react-tabs-content-refresh-epylt?file=/src/Diagram.js

Diagram.js:  

const dropNode = () => {

  setTimeout(() => {

    var tab = document.getElementById("editortab").ej2_instances[0];

    tab.refresh();

  }, 50);

};

const selectionClick = () => {

  setTimeout(() => {

    var tab = document.getElementById("editortab").ej2_instances[0];

    tab.refresh();

  }, 50);

};

      <DiagramComponent

        id="diagram"

        ref={props.diagRef}

        selectionChange={props.selectedChanged}

        drop={dropNode}

        click={selectionClick}

      >

Kindly try the above sample and get back to us, if you need further assistance.    
 

 

Regards,      

Satheesh Kumar B 

[Gareth]

Hmmmm - thanks for your answer.  Yes it sort of works but not particularly elegant.  Every time I change a shape selection I get a flicker in the tab panel of [object Object] before the content is correctly updated. I'm not sure this solution could be used in a professional site.

Surely in a React library, updating the props would be a better way?

[Ravikumar Venkatesan]

Hi Gareth, 

Thanks for the update. 

We have validated your reported query at our end and resolved the flickering by using the tab content template and the same available in the below-shared sample. 

Sample: https://codesandbox.io/s/react-tabs-content-refresh-forked-pbptf?file=/src/TabbedSidebar.js 

 

[TabbedSidebar.js] 

export function EditorSidebar(props) { 

  let headerText = [ 

    { text: "1", iconCss: "e-info" }, 

    { text: "2", iconCss: "e-info" } 

  ]; 

 

  const sidebarRef = React.useRef(); 

  const tabRef = React.useRef(); 

 

  function shapeTabContent() { 

    return <ShapeStyleTab {...props} />; 

  } 

 

  return ( 

      <TabComponent id="editortab" headerPlacement="Left" cssClass="editcontent" ref={tabRef} {...props}> 

        <TabItemsDirective> 

          <TabItemDirective header={headerText[0]} content={shapeTabContent} /> 

          <TabItemDirective header={headerText[1]} content={shapeTabContent} /> 

        </TabItemsDirective> 

      </TabComponent> 

  ); 

} 

 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Gareth]

Thanks