React-custom-scrollbars: AutoHeight prop causes warning: Mutating `style` is deprecated

Created on 27 Nov 2016  路  3Comments  路  Source: malte-wessel/react-custom-scrollbars

Im trying to use the scrollbar with autoHeight but it triggers the following warning:

Warning: div was passed a style object that has previously been mutated. Mutating style is deprecated. Consider cloning it beforehand. Check the render of Scrollbars. Previous style: {position: "relative", top: undefined, left: undefined, right: undefined, bottom: undefined, overflow: "scroll", WebkitOverflowScrolling: "touch", marginRight: 0, marginBottom: 0, minHeight: NaN, maxHeight: NaN}. Mutated style: {position: "relative", top: undefined, left: undefined, right: undefined, bottom: undefined, overflow: "scroll", WebkitOverflowScrolling: "touch", marginRight: 0, marginBottom: 0, minHeight: NaN, maxHeight: NaN}.

This is how I am using the Scrollbar:

    const scrollAreaProps = {
      autoHeightMax: 246,
      autoHeightMin: 116,
      autoHeight: true
    };

      <Scrollbars ref={this.saveScrollbarRef} {...scrollAreaProps}>
              <ul>
                {this.generateList()}
              </ul>
       </Scrollbars>

Am I missing something?
Thanks!

Most helpful comment

found the issue
as i understand @Niryo is working with repo https://github.com/Niryo/react-playground
there he is using jsdom for tests and that lib doesn't provide properties offsetWidth and clientWidth for elements
current repo has util function getScrollbarWidth which uses these properties
and the result is NaN because undefined - undefined = NaN
scrollbar uses that result for generate styles and react throw warning for mutate NaN

to prevent such situation:

function getScrollbarWidth() {
    ...

    return scrollbarWidth || 0;

}

All 3 comments

i used your scrollAreaProps into my project and everything was good
can you show your package.json and full code of component where you are using scrollbar?

found the issue
as i understand @Niryo is working with repo https://github.com/Niryo/react-playground
there he is using jsdom for tests and that lib doesn't provide properties offsetWidth and clientWidth for elements
current repo has util function getScrollbarWidth which uses these properties
and the result is NaN because undefined - undefined = NaN
scrollbar uses that result for generate styles and react throw warning for mutate NaN

to prevent such situation:

function getScrollbarWidth() {
    ...

    return scrollbarWidth || 0;

}

@ash-developer Great job man:) BTW Im sorry I wasn't responsive in providing the exact project details...Im glad you figured it out anyway

Was this page helpful?
0 / 5 - 0 ratings

Related issues

eyal1990 picture eyal1990  路  5Comments

magnetronnie picture magnetronnie  路  3Comments

philcockfield picture philcockfield  路  3Comments

ilfa picture ilfa  路  5Comments

dusanstojanovic picture dusanstojanovic  路  3Comments