scroll with react-bootstrap NavItem doesnt collapse on mobile

[ceboola]

Hi, its kinda weird, without react-scroll is just working fine (tested with another scroll component and works well, so decided to post it here). Cant figure out why it is not working with react-scroll, tried to change <a> tag in Link.js to smth else with no success. Anyway other things working ok, as you can see its only collapsing when u click around the <a>, when u click directly in <a> collapsing is not working then.

import React, { Component } from 'react';
import './App.css';
import { Navbar, Nav, NavItem} from 'react-bootstrap';
import Scroll from 'react-scroll';

const Link = Scroll.Link;

class App extends Component {

  constructor (props){
      super(props);
      this.scrollToTop = this.scrollToTop.bind(this);
  }
  scrollToTop(){}

  updateDimensions = () => {
     const w = window,
          d = document,
          documentElement = d.documentElement,
          body = d.getElementsByTagName('body')[0],
          width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
          height = w.innerHeight|| documentElement.clientHeight|| body.clientHeight;
          this.setState({width, height});
      }

      componentWillMount() {
          this.updateDimensions();
      }

      componentDidMount() {
          window.addEventListener("resize", this.updateDimensions);
      }

      componentWillUnmount() {
          window.removeEventListener("resize", this.updateDimensions);
      }

  render() {
    return (
      <div>
      <Navbar fixedTop inverse collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <a role="button">React-Bootstrap</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#section1"><Link activeClass="" to="section1" spy={true} smooth={true} duration={500}>Section1</Link></NavItem>
        <NavItem eventKey={2} href="#section2"><Link activeClass="" to="section2" spy={true} smooth={true} duration={500}>Section2</Link></NavItem>
        <NavItem eventKey={3} href="#section3"><Link activeClass="" to="section3" spy={true} smooth={true} duration={500}>Section3</Link></NavItem>
        <NavItem eventKey={4} href="#section4"><Link activeClass="" to="section4" spy={true} smooth={true} duration={500}>Section4</Link></NavItem>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

  <div id="section1"></div>
  <div id="section2"></div>
  <div id="section3"></div>
  <div id="section4"></div>
</div>
    );
  }
}

export default App;

[ceboola]

so this is more react-bootsrap problem than react-scroll at all, dunno why its affect this scroll and other dont. Found workaround by @pxpeterxu and modified it to work with latest CRA + packages. So basically you need to delete collapseOnSelect from <Navbar> component then trigger it inside single <NavItem> element like this:

import React, { Component } from 'react';
import './App.css';
import { Navbar, Nav, NavItem} from 'react-bootstrap';
import Scroll from 'react-scroll';

const Link = Scroll.Link;

class App extends Component {

  constructor (props){
      super(props);
      this.scrollToTop = this.scrollToTop.bind(this);
  }
  scrollToTop(){}

  state = {
    expanded: {}
  }

  setNavExpanded = (expanded) => {
  this.setState({ navExpanded: expanded });
  }

  closeNav = () => {
  this.setState({ navExpanded: false });
  }

  render() {
    return (
      <div>
      <Navbar fixedTop inverse 
        onToggle={this.setNavExpanded}
        expanded={this.state.navExpanded}>
    <Navbar.Header>
      <Navbar.Brand>
        <a role="button">React-Bootstrap</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#section1"><Link onClick={this.closeNav} activeClass="" to="section1" spy={true} smooth={true} duration={500}>Section1</Link></NavItem>
        <NavItem eventKey={2} href="#section2"><Link onClick={this.closeNav} activeClass="" to="section2" spy={true} smooth={true} duration={500}>Section2</Link></NavItem>
        <NavItem eventKey={3} href="#section3"><Link onClick={this.closeNav} activeClass="" to="section3" spy={true} smooth={true} duration={500}>Section3</Link></NavItem>
        <NavItem eventKey={4} href="#section4"><Link onClick={this.closeNav} activeClass="" to="section4" spy={true} smooth={true} duration={500}>Section4</Link></NavItem>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

  <div id="section1"></div>
  <div id="section2"></div>
  <div id="section3"></div>
  <div id="section4"></div>
</div>
    );
  }
}

export default App;

hope it will helps someone in future