I am developing a React app using Material UI. I am having an issue with one page of the app.
That page contains some text and a button, which are vertically aligned with one another. It also contains a second piece of text and a second button, which are vertically aligned with one another and which are initially hidden. The first button can be used to reveal the second piece of text and the second button. The second button can be used to conceal the second piece of text and itself (i.e. the second button).
Here's a link to a screenshot of the page with the initially-hidden content visible (I don't have enough StackOverflow rep points to embed an image yet).
react-material-ui-app-page-screenshot
The issue I'm having is:
When I click the first button (i.e. the "SHOW" button), then click the second button (i.e. the "HIDE" button), then click the first button again; the first button jumps across the page. More specifically, it goes from having its right edge touch the right edge of the <body> element, to having its left edge touch the right edge of the preceding piece of text.
Once the button has jumped, when I resize the browser window (e.g. by clicking and dragging the Chrome application window), the button returns to its original location.
Note: The jumping happens in Chrome, but not in Firefox.
Do any of you know why that is happening?
I created a demo of this phenomenon on CodeSandbox. Here's a link to that demo:
Upon a closer look, it appears to have to do with having flex-wrap: wrap on a display: flex; flex-direction: column;.
wrap={"nowrap"}
...fixes it.
See it here.
It's difficult to say if it's a bug or not. What should we expect from a flex column container with flex-wrap:wrap and without a set height, in terms of column width?
Because the correct behavior might be to shrink the column as much as possible.
The bug is that it renders differently in different contexts. Whatever the correct behavior is, it should be consistent.