Fluentui: TS2322 error with DetailsList

[elegault]

Would somebody please take a look at my question on SO? https://stackoverflow.com/questions/53397347/ts2322-error-with-office-ui-fabric-detailslist-component

It seems every example in the packages/office-ui-fabric-react/src/components/DetailsList/examples directory that uses componentRef is throwing the TS2322 error. I'm not sure if this is an issue with the types for DetailsList, WebStorm, my environment, my brain, etc.

[KevinTCoughlin]

Would somebody please take a look at my question on SO? https://stackoverflow.com/questions/53397347/ts2322-error-with-office-ui-fabric-detailslist-component

It seems every example in the packages/office-ui-fabric-react/src/components/DetailsList/examples directory that uses componentRef is throwing the TS2322 error. I'm not sure if this is an issue with the types for DetailsList, WebStorm, my environment, my brain, etc.

@elegault, which version of tsc are you experiencing this with? cc: @cliffkoh who may have some advice

[cliffkoh]

I agree that the most important variable (and missing piece of information here) is the TypeScript version. Otherwise, it could be with the way npm packages for typings were installed/resolved. If you were to use the same version of TypeScript as the Fabric project does (2.8.4 atm - 2.8.x is our minbar), you shouldn't be seeing an error...

[elegault]

I tried 2.8.4 (was using 2.7.2) and it's the same error!

[cliffkoh]

What about the verison of OUFR? OUFR does not compile at all with 2.7.2) - you'll get an error in @uifabric/merge-styles because it uses 2.8 features.

I would encourage creating a standalone project/repro for the issue. Most likely, you'll not hit the problem you're reporting here which would at least help narrow down where the problem lies (if you're able to repro in a standalone repro - it would really help us if you can repro it at codesandbox.io).

[elegault]

I upgraded OUFR to 6.107 from 5.97.1 (and react-dom to 16.6.3 from 16.3). The error still occurs unfortunately. I'll see if I can find time to create a repro project repo.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[elegault]

FYI, I hope to be able to create a repro project by Tuesday

[chotkos]

Repo with example:
https://github.com/chotkos/OfficeDev_DetailsList_Error

I've tried to create simple DetailsList as in the example available here

Might it be connected to this error from image (Chrome console while loading webpart on workbench)?

[elegault]

I have seen something similar on a previous build of my add-in on a test server, reported by another user. I had to remove that line in order for that component to render. I can't repro on my dev PC:

[KevinTCoughlin]

Does the above issue predate #7042? We did _recently_ modify our usage of _createRef_. But assuming we're using >= [email protected] it _should_ compile. cc: @khmakoto if he has any insight.

[elegault]

@KevinTCoughlin is that addressed to me?

[chotkos]

So, on the example i've get rid of
private _root = React.createRef<IDetailsList>
and all of references to this object. Then example works like a charm.

[elegault]

@chotkos I see on your StackOverflow example that you don't have the componentRef={this._root} property for the DetailsList component in render(); that's the entire problem - componentRef won't resolve, and I need that object so I can call the focusIndex() method

[elegault]

Sooo...it's now resolving. I don't know why or what changed. All I did was create a second instance of WebStorm and a new React project from the Yo Office generator, and verified that componentRef was indeed resolving. The error was still occurring in the other loaded project, but at some point after analyzing types files and doing file diffs to look for clues I noticed that the error stopped occurring. Great! But wow, I wish I knew what triggered this to finally resolve! Nothing makes sense, but I'll take it.

BUT! All this effort and now I discover that focusIndex is doing absolutely nothing! Shouldn't it be scrolling to the item specified by the index, and rendering the row selector?? I can verify that this._root.current is not null, and any index value I provide makes no difference (e.g. focusIndex(3, false)). I cobbled together a test example on CodePen (https://codepen.io/elegault/pen/YRJxmK), but it is behaving differently then in my add-in - _root is never getting properly defined, so I can't even call focusIndex. Not sure how I'm setting this up wrong. Any help would be appreciated!

[KevinTCoughlin]

BUT! All this effort and now I discover that focusIndex is doing absolutely nothing! Shouldn't it be scrolling to the item specified by the index, and rendering the row selector?? I can verify that this._root.current is not null, and any index value I provide makes no difference (e.g. focusIndex(3, false)). I cobbled together a test example on CodePen (https://codepen.io/elegault/pen/YRJxmK), but it is behaving differently then in my add-in - _root is never getting properly defined, so I can't even call focusIndex. Not sure how I'm setting this up wrong. Any help would be appreciated!

@elegault, I've confirmed that IDetailsList#focusIndex works in the following Codepen, https://codepen.io/kevintcoughlin/pen/pqvOxg.

I believe IDetailsList#focusIndex in https://codepen.io/elegault/pen/YRJxmK is not working due to the following:

1. The onClick which invokes focusIndex, is losing context of this and requires a .bind(this) or => otherwise this._root member is undefined.
2. The DetailsList is not the scrollable element, therefore scrollTop has no effect when invoked as part of focusIndex.

I recommend using the above _working_ Codepen as a base for troubleshooting focusIndex in your Codepen.

[elegault]

Thanks @KevinTCoughlin! I'm good to go and got it working, you can close this.

[KevinTCoughlin]

Thanks @KevinTCoughlin! I'm good to go and got it working, you can close this.

Glad to hear 😃!