Error searching for projects

[fredrikleroy]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Environment

[x] SharePoint Online

[ ] SharePoint 2013

[ ] SharePoint 2016

Browser

[x] Chrome

[ ] Internet Explorer

[x] Edge

[ ] Safari

[ ] Other

Summary

Project search on front page fails. After the first character is typed in, the input field "freezes" and stops accepting any more characters. Console says error "http://facebook.github.io/react/docs/error-decoder.html?invariant=185". "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."

Same thing happens when I click on the menu icons on each of the project cards on the frontpage.

I've changed the GtProjectOwner field to accept multiple entries, but I can't see that this should cause the error.

Version

2.1.60 and 2.1.68

Expected / Desired Behavior / Question

Normal search functionallity

Observed Behavior

Steps to Reproduce

Start typing in the search box on the front page

[fredrikleroy]

After more investigation I found the problem beeing related to the shrinkTitle function. Could not find any pattern, but the first picture has trimmed the title showing both start and end of the title. The second has trimmed the title showing the start, but NOT the end of the title. This causes the error to occur. Let me know if u want a demo of the problem.

For now I have edited the pp.main.css file and made the title div a bit higher to avoid the problem. Not ideal, but it works.

.ms-DocumentCardTitle { height: 105px !important; word-break: break-word; }

[olemp]

shrinkTitle is from office-ui-fabric-react.

  DocumentCardTitle.prototype.componentDidUpdate = function () {
        // If we're truncating, make sure the title fits
        if (this.props.shouldTruncate) {
            this._shrinkTitle();
        }
    };

    DocumentCardTitle.prototype._shrinkTitle = function () {
        if (this._doesTitleOverflow()) {
            var _a = this.state, truncatedTitleFirstPiece = _a.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _a.truncatedTitleSecondPiece;
            this._isTruncated = true;
            if (!truncatedTitleFirstPiece && !truncatedTitleSecondPiece) {
                this._startTruncation(this.props);
            }
            this.setState({
                truncatedTitleFirstPiece: truncatedTitleFirstPiece.slice(0, truncatedTitleFirstPiece.length - 1),
                truncatedTitleSecondPiece: truncatedTitleSecondPiece.slice(1)
            });
        }
    };

    DocumentCardTitle.prototype._doesTitleOverflow = function () {
        var titleElement = this._titleElement.value;
        if (!titleElement) {
            return false;
        }
        return titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD || titleElement.scrollWidth > titleElement.clientWidth;
    };

It seems like it's executed in componentDidUpdate, and it's updating the state of the component, which might cause an loop. I'll look into possible solutions, @fredrikleroy.

[olemp]

What's the full title of the project in the screenshot above, @fredrikleroy?

[olemp]

Attempt to fix in commit https://github.com/Puzzlepart/prosjektportalen/commit/06ec161fb03668849e736bf5ec0886d284a5592d

[fredrikleroy]

Full title "Digitalisering, sluttvurdering, dokumentasjon og IKT"

[olemp]

This must have been triggered by several cards in need of _shrinkTitle, which has caused too many updates. In commit https://github.com/Puzzlepart/prosjektportalen/commit/06ec161fb03668849e736bf5ec0886d284a5592d I disabled title truncation.

If you want to test this fix before the next release, you can build from dev. 💯

[fredrikleroy]

Thanks for the quick response :)

[fredrikleroy]

The portal currently holds around 70 projects, so you're probably right that this is related to many shrink operations.... I'll let u know how it works if I get the time to build it before next release. Thanks again.

[tarjeieo]

Looks to be fixed in the latest version (2.1.75) - feel free to verify @fredrikleroy ! :bowtie: