CODEWITHSUNDEEP
javascriptreactjsreact-router
mkorman
mkorman

Reputation: 352

Scrolling does not work after redirect in reactstrap

I'm working on a simple, petshop-like application in React. Its main functionality is managing articles. Recently I've experienced some weird behavior after trying to redirect client to a different route when a certain button is clicked.

So I have a button definition inside a reactstrap's modal window

render() {
<Modal isOpen={this.state.modalOpen} toggle={this.toggleModal.bind(this)}
...
  <Button onClick={this.addNewArticle.bind(this)}>Add</Button>
...

It is meant to trigger a callback which will POST entered article data and then redirect client to a page where newly created article is displayed

addNewArticle() {
    fetch('/api/v1/article', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.state.articleData)
    })
    .then(response => response.json())
    .then(article => {
        // ...
        this.toggleModal();
        this.props.history.push(`/read/${article.id}`);
    });
}

toggleModal() {
    this.setState({
        modalOpen: !this.state.modalOpen,
    });
}

Problem is, after the redirect is complete I'm not able to scroll through the article with the mouse wheel (calling window.scrollByLines(1) in devtools actually works). The whole page is just fixed in place. After I completely refresh the whole page (F5) everything seems to be back to normal and scrolling is enabled again. I've tried replacing this.props.history.push with returning <Redirect /> tag inside the render() function, but it didn't help.

How can I prevent that weird scrolling lock?

EDIT: Added details about modal window.
It seems toggleModal() doesn't work as expected as it leaves the following CSS class in DOM, after redirect:

.modal-open {
    overflow: hidden;
}

Upvotes: 1

Views: 1235

Answers (1)

mkorman
mkorman

Reputation: 352

It turns out to be a known bug in reactstrap - https://github.com/reactstrap/reactstrap/issues/1323

For now I have modified the addNewArticle code to remove the problematic element manually and the problem is gone

...
.then(article => {
    ...
    this.toggleModal();
    document.querySelector('body').classList.remove('modal-open');
    this.props.history.push('/');
});

Upvotes: 1

Related Questions