TS2322 error with Office UI Fabric DetailsList component - reactjs

Question

I'm trying to follow the example here from the office-ui-fabric-react repo simply to test the new focusedIndex function to scroll a selection into view.
However, WebStorm is highlighting a TS2322 error in the render() function trying to set the componentRef property to a class variable:
(short error)
TS2322: Type '{componentRef: RefObject... is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes...
The error occurs when using the full unmodified code from the link, but here's a snippet of the relevant class code for reference and the ** affected line ** in the render() function:
import * as React from 'react';
import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { IDetailsList, DetailsList, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import './DetailsList.Grouped.Example.scss';
export class DetailsListGroupedExample extends BaseComponent<
{},
{
items: {}[];
showItemIndexInView: boolean;
}
>
{
private _root = React.createRef<IDetailsList>();
constructor(props: {}) {
super(props);
this.state = {
items: _items,
showItemIndexInView: false
};
}
public render() {
const { items } = this.state;
return (
<Fabric className="DetailsList-grouped-example">
<div>
<Checkbox
label="Show index of the first item in view when unmounting"
checked={this.state.showItemIndexInView}
onChange={this._onShowItemIndexInViewChanged}
/>
</div>
<DefaultButton onClick={this._addItem} text="Add an item" />
<DetailsList
componentRef={this._root} //**TS2322 ERROR HERE**
items={items}
groups={[
{
key: 'groupred0',
name: 'By "red"',
startIndex: 0,
count: 2
},
{
key: 'groupgreen2',
name: 'By "green"',
startIndex: 2,
count: 0
},
{
key: 'groupblue2',
name: 'By "blue"',
startIndex: 2,
count: items.length - 2
}
]}
columns={_columns}
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
ariaLabelForSelectionColumn="Toggle selection"
groupProps={{
showEmptyGroups: true
}}
onRenderItemColumn={this._onRenderColumn}
/>
</Fabric>
);
}
}
What am I doing wrong or what do I need to do to resolve this compile error?

Answer 1

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.
It looks like something has been changed in fabric react controls, but codesamples on their website has not been updated which is annoying.
My code:
import * as React from 'react';
import styles from './RsfDictionaries.module.scss';
import { IRsfDictionariesProps } from './IRsfDictionariesProps';
import { escape } from '#microsoft/sp-lodash-subset';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IColumn, IDetailsList } from 'office-ui-fabric-react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { IDocument, IDetailsListDocumentsExampleState } from './states';
import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
const _columns = [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100,
maxWidth: 200,
isResizable: true
},
{
key: 'color',
name: 'Color',
fieldName: 'color',
minWidth: 100,
maxWidth: 200
}
];
const _items = [
{
key: 'a',
name: 'a',
color: 'red'
},
{
key: 'b',
name: 'b',
color: 'red'
},
{
key: 'c',
name: 'c',
color: 'blue'
},
{
key: 'd',
name: 'd',
color: 'blue'
},
{
key: 'e',
name: 'e',
color: 'blue'
}
];
export default class RsfDictionaries extends React.Component<IRsfDictionariesProps, {
items: {}[];
showItemIndexInView: boolean;
}> {
constructor(props: any) {
super(props);
this.state = {
items: _items,
showItemIndexInView: false
};
}
public componentWillUnmount() {
if (this.state.showItemIndexInView) {
const itemIndexInView = 0;//this._root!.current!.getStartItemIndexInView();
alert('unmounting, getting first item index that was in view: ' + itemIndexInView);
}
}
private _root :IDetailsList; //React.createRef<IDetailsList>();
public render(): React.ReactElement<IRsfDictionariesProps> {
const { items } = this.state;
return (
<Fabric className="DetailsList-grouped-example">
<div>
<Checkbox
label="Show index of the first item in view when unmounting"
checked={this.state.showItemIndexInView}
onChange={this._onShowItemIndexInViewChanged}
/>
</div>
<DefaultButton onClick={this._addItem} text="Add an item" />
<DetailsList
//={this._root}
items={items}
groups={[
{
key: 'groupred0',
name: 'By "red"',
startIndex: 0,
count: 2
},
{
key: 'groupgreen2',
name: 'By "green"',
startIndex: 2,
count: 0
},
{
key: 'groupblue2',
name: 'By "blue"',
startIndex: 2,
count: items.length - 2
}
]}
columns={_columns}
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
ariaLabelForSelectionColumn="Toggle selection"
groupProps={{
showEmptyGroups: true
}}
onRenderItemColumn={this._onRenderColumn}
/>
</Fabric>
);
}
private _addItem = (): void => {
const items = this.state.items;
this.setState(
{
items: items.concat([
{
key: 'item-' + items.length,
name: 'New item ' + items.length,
color: 'blue'
}
])
},
() => {
//if (this._root.current) {
//this._root.current.focusIndex(items.length, true);
//}
}
);
};
private _onRenderColumn(item: any, index: number, column: IColumn) {
let value = item && column && column.fieldName ? item[column.fieldName] : '';
if (value === null || value === undefined) {
value = '';
}
return (
<div className={'grouped-example-column'} data-is-focusable={true}>
{value}
</div>
);
}
private _onShowItemIndexInViewChanged = (event: React.FormEvent<HTMLInputElement>, checked: boolean): void => {
this.setState({
showItemIndexInView: checked
});
};
}