Skip to content

fix(CardHeightMatching): Fix debounce invocation in CardHeightMatching - #301

Merged
jeff-phillips-18 merged 1 commit into
patternfly:masterfrom
dmiller9911:300-CardHeightMatchingFix
Apr 16, 2018
Merged

jeff-phillips-18 merged 1 commit into
patternfly:masterfrom
dmiller9911:300-CardHeightMatchingFix

Conversation

@dmiller9911

Copy link
Copy Markdown
Contributor

What:
debounce needs to be passed a function.

Link to Storybook:
https://rawgit.com/dmiller9911/patternfly-react/card-height-matching-debounce/index.html

Additional issues:
fix #300

@coveralls

Copy link
Copy Markdown

Pull Request Test Coverage Report for Build 1128

  • 0 of 1 (0.0%) changed or added relevant line in 1 file are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage decreased (-0.03%) to 72.468%

Changes Missing Coverage Covered Lines Changed/Added Lines %
src/components/Cards/CardHeightMatching.js 0 1 0.0%
Totals Coverage Status
Change from base Build 1127: -0.03%
Covered Lines: 1259
Relevant Lines: 1580

💛 - Coveralls

@coveralls

coveralls commented Apr 9, 2018 •

Copy link
Copy Markdown

Pull Request Test Coverage Report for Build 1140

  • 3 of 3 (100.0%) changed or added relevant lines in 1 file are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+1.3%) to 73.768%

Totals Coverage Status
Change from base Build 1127: 1.3%
Covered Lines: 1287
Relevant Lines: 1582

💛 - Coveralls

@priley86

Copy link
Copy Markdown
Member

@michaelkro can you confirm?

@michaelkro

michaelkro commented Apr 10, 2018 •

Copy link
Copy Markdown
Contributor

So the good news is that the error reported in #300 is gone, but the bad news is that now, when navigating away from the Base Card w/HeightMatching story, I'm seeing this error

CardHeightMatching.js:53 Uncaught TypeError: Cannot read property 'querySelectorAll' of null
    at CardHeightMatching.js:53
    at Array.forEach (<anonymous>)
    at CardHeightMatching._matchHeights (CardHeightMatching.js:52)
    at CardHeightMatching.js:23
    at helpers.js:15

edit: I should note that while I'm seeing this error in our storybook, I have no idea if this will/does happen in a product environment

@dmiller9911

Copy link
Copy Markdown
Contributor Author

I noticed that as well. I "think" it is storybook related, but I will track it down as well and see if I can fix it. I am adding tests now so I am not quite finished anyways.

});

test('creates a ResizeSensor for each selector', () => {
mount(<CardHeightMatching {...props} />);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mount was used instead of shallow since refs are used inside of the component.

@michaelkro michaelkro left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

}

_matchHeights(selectors = this._selectors) {
if (!this._container) {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just in case...it doesn't hurt...thanks!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, this was the source of the error @michaelkro mentioned before. Since _matchHeights is called inside of debounce, this can be called after the component has unmounted which will make _container null. I didn't see a good way to cancel the debounced call, unfortunately.

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

Successfully merging this pull request may close these issues.

Uncaught error when using Cards with height matching

5 participants