Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AutoHeight prop causes warning: Mutating style is deprecated #104

Closed
Niryo opened this issue Nov 27, 2016 · 3 comments
Closed

AutoHeight prop causes warning: Mutating style is deprecated #104

Niryo opened this issue Nov 27, 2016 · 3 comments

Comments

@Niryo
Copy link

Niryo commented Nov 27, 2016

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!

@ash-developer
Copy link

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?

@ash-developer
Copy link

ash-developer commented Nov 29, 2016

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;

}

@Niryo
Copy link
Author

Niryo commented Nov 29, 2016

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants