Nsryjdtyk

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?

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

    });

  };





}