List: broken rendering if scrolling while `display: none` is set + not scrolling to the right element

Steps to reproduce:

• Have a list
• Scroll it
• Filter it
• Even if the new filtered list is not long enough to be scrollable react-window still thinks that it is scrolled, and some rows might not get rendered

I’ve made a video showcasing this here.

Until this is fixed I think I’ll either have to render the list twice by forcing an update of scrollOffset by triggering a scroll event, or manually setting scrollTop = 0 before each filtering round or something.

scroll_offset.mp4.zip

[bvaughn]

Looks like something funky is going on with your params (like maybe you aren’t updating the itemCount or something). Unless you can provide a repro, I can’t really help here.

I’m going to close this for now because I don’t like keeping unactionable issues open. We can keep talking though, and I’ll be happy to look at a repro if you can share one.

[hardnold]

I’m having a similar problem (not the exact same one, but still related to display: none).

I have a toggle-Link which shows and hides a container with display: none and display: block.

          <p className={classes.tip} onClick={ this.toggleTip }>
            Toogle Text
          </p>
          <div className={classes.tipToggle} style={this.state.toggleOpen ? { display : 'block' } : { visibility : 'hidden' }}>
            <ol style={{ paddingLeft : '15px' }}>
              <li>Item 1</li> 
              <li>Item 2</li>
              <li>Item 3</li>
            </ol>
          </div>

toggleTip = () => {
    this.setState({ toggleOpen : !this.state.toggleOpen })
  }

On the same page I have an Input which triggers a live search after each keystroke and therefor updates the state.

If the toggle is closed, the page keeps scrolling to the top after each keystroke. If the toggle is closed, the page doesn’t scroll and the Input stays at the same position (latter is the expected and wanted behavior).