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:
- Clone https://github.com/hammerhg/yfiles-react-demo-test
- Fix the location of the
yfiles-23.0.4-dev.tgz
andlicence.json
npm install
npm start
- In the browser window make sure that the graph nodes and edges are visible.
- Click on the
Other page
link on he top left. - Click on the
Graph
link on he top left. - Observe that the nodes and edges are not visible.
- 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
)
After state (after browsing to back to graph
)
Browser (please complete the following information):
- yFiles HTML version: yfiles 23.0.4
- Browser [Any]
- Version [latest]
- OS: [MacOS, Any]
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.