Inline height not recalculated on resize about react-headroom

[rafaelderolez]

After some more testing I see that headroom-wrapper gets an inline height to prevent the content underneath from jumping while switching from unfixed to unpinned.

Regardless, it would be nice if headroom recalculated its height.

[JLongley]

+1

Looking at it, it does resize the header in the componentDidUpdate() function.

My use case is a collapsing menu on mobile. When they hit the collapse button, the header shrinks.

The problem I'm facing is that componentDidUpdate remeasures the header instantaneously, and doesn't give it time for the animation to finish. If I call this.forceUpdate() on a timeout, the header janks back to the correct size.

[rafaelderolez]

@rusi Here's my temporary fix:

When resizing the window, I execute setHeaderHeight which gets the height of my actual header element. I put it in the state of my component and then pass that in Headroom's wrapperStyle prop. Hope that works for you! (You can probably debounce this to improve performance, but here's a very barebones version.)

Note: I use disableInlineStyles as I have my own transitions and styling for Headroom.

componentDidMount() {
  this.setHeaderHeight.bind(this);
  window.addEventListener('resize', this.setHeaderHeight.bind(this));
}

setHeaderHeight() {
  const headerHeight = this.header.clientHeight;
  this.setState({ headerHeight });
}

render() {
    const { headerHeight } = this.state;

    return (
      <Headroom
        disableInlineStyles
        wrapperStyle={headerHeight}
      >
        <header ref={(ref) => { this.header = ref; }}>
        …
        </header>
      </Headroom>
  );
}

@KyleAMathews What do you think?

[rafaelderolez]

@JLongley componentDidUpdate only sets a new height according to the following: // If children have changed, remeasure height.

I'm not changing any children for my responsive styles. I only update some padding and font-sizes, which obviously changes the height of my header and subsequently would have to set a new height on headroom.

[rusi]

@JLongley I am having the exact same issue. Were you able to find a good solution to this problem?

[emilbruckner]

+1