Make back button of browser close overlay pane in HTML tables

[marto97]

Hi @PhilippWendler,

I added two functions for back button:

• event listener for back button

• and the second function changes the url link of the browser's back button

My idea to fix this issue is to use {this.props.close} when back button is clicked, but unfortunately it is returning an error Expected an assignment or function call and instead saw an expression no-unused-expressions

[PhilippWendler]

My idea to fix this issue is to use {this.props.close} when back button is clicked

What do you mean with this? If you want to call this function you have to use a function call, of course.

[marto97]

Hi @PhilippWendler,

I changed my code, I deleted completely function backButton(). I added to the component SelectColumn event listeners in componentDidMount, and remove the event listeners in componentWillUmount.
I used this.props.close to close the Overlay and window.history.forward() to stay at the same page.

Seems this solution fix the issue in a proper way. If you accept the fix I will implemented it in LinkOverlay as well.

[PhilippWendler]

Thanks! Unfortunately it seems that the trick with going backward and then calling window.history.forward() does not work reliably. For example:

1. Open new tab
2. Open the URL of a table (local development environment is enough)
3. Click on "Click here to select columns"
4. Press the back button
   What happens is that the tab goes back to the "new tab" page and stays there (tested in Firefox). So it seems we need another solution, probably one were we push something on the history?

[marto97]

I used window.history.pushState({}, "", ""); to push new state to the history of browser, so window.history.forward() is not needed anymore.

And as an EventListener now I use popstate instead of hashchange. Because hashchange is fired only when the fragment identifier of the URL has changed. While popstate is fired when the active history entry changes while the user navigates the session history.

1. Open new tab
2. Open the URL of a table (local development environment is enough)
3. Click on "Click here to select columns"
4. Press the back button
   What happens is that the tab goes back to the "new tab" page and stays there (tested in Firefox).

This solution is much more reliable. It fixes the "new tab" problem and also it doesn't reload the page when overlay is closed.

[PhilippWendler]

This works nicely, indeed! The only thing that I found is that when closing an overlay manually (e.g., via the "X") and then pressing the "Back" button, nothing happens. One has to press the "Back" button again to use its proper functionality.

Of course the reason for this is that there is still the pushed state in the history if the overlay is closed via some other mechanism.

[marto97]

Hi @PhilippWendler,

I added function handlePopState() which is used for closing an overlay manually (e.g., via the "X") to fix the issue:

pressing the "Back" button, nothing happens.

[PhilippWendler]

Thank you very much, seems to work nicely now!