yWorks/yfiles-for-html-demos

Raect Sample issue when using `react-router-dom` built it capabilities

hammerhg opened this issue · 2 comments

Using the React sample from yfiles-for-html-demos/toolkin/react and adding react-router-dom built it capabilities to the sample application the Graph is only being rendered for the first time.
The behaviour can be seen here https://github.com/hammerhg/yfiles-react-demo-test.

To Reproduce
Steps to reproduce the behavior:

  1. Clone https://github.com/hammerhg/yfiles-react-demo-test
  2. Fix the location of the yfiles-23.0.4-dev.tgz and licence.json
  3. npm install
  4. npm start
  5. In the browser window make sure that the graph nodes and edges are visible.
  6. Click on the Other page link on he top left.
  7. Click on the Graph link on he top left.
  8. Observe that the nodes and edges are not visible.
  9. Refresh the page and observes the nodes and edges are visible.

Expected behavior
When navigating away and back to the graph page using react-router-dom built it capabilities the graph nodes and edges should be rerendered.

Screenshots
Initial state (before browsing to other-page)
Screen Shot 2021-02-07 at 23 49 00

After state (after browsing to back to graph)
Screen Shot 2021-02-07 at 23 49 14

Browser (please complete the following information):

  • yFiles HTML version: yfiles 23.0.4
  • Browser [Any]
  • Version [latest]
  • OS: [MacOS, Any]
yGuy commented

Thank you for the wonderful report! We are going to look into this ASAP.

Thanks to the concise test case, we could easily reproduce the problem. It is caused by the fact that the an internal part of the library sets position:relative on the GraphComponent element, which is unnecessary in this case and causes the GraphComponent to have zero height. We will fix this erroneous behavior of the library in a future release. In the meantime, a workaround for this particular sample is to make the position:absolute rule in ReactGraphComponent.css !important: d518d38

Thank you again for the detailed report and sorry for the inconvenience.