Type error inside Scrollable Pane example

[msandora]

Hello, I have tried to evaluate the Detail List Locked sample code found here: https://developer.microsoft.com/en-us/fabric#/controls/web/scrollablepane I get the following error messages:

(TS) Type '(props: IDetailsHeaderProps, defaultRender?: IRenderFunction | undefined) => Element' is not assignable to type 'IRenderFunction'. Types of parameters 'props' and 'props' are incompatible. Type 'IDetailsHeaderProps | undefined' is not assignable to type 'IDetailsHeaderProps'. Type 'undefined' is not assignable to type 'IDetailsHeaderProps'.

My code can be found here: https://github.com/msandora/mb-stuff/blob/master/playground/UsersList.ts

version: "office-ui-fabric-react": "7.83.1"

I apologize if this is not a bug, if you can offer any insight as to how I can resolve this issue I would very much appreciate the assistance.

[xugao]

@msandora - similar to issue #11928, this must be caused by you have enabled strictFunctionTypes : true in your app/tsconfig

You can fix the typing in your app. try this:

const onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
  if (!props) {
    return null;
  }

  return (
    <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced={true}>
      {defaultRender!({
        ...props,
        onRenderColumnHeaderTooltip: (tooltipHostProps: ITooltipHostProps) => <TooltipHost {...tooltipHostProps} />
      })}
    </Sticky>
  );
};

const onRenderDetailsFooter: IRenderFunction<IDetailsFooterProps> = (props, defaultRender) => {
  if (!props) {
    return null;
  }

  return (
    <Sticky stickyPosition={StickyPositionType.Footer} isScrollSynced={true}>
      <div className={classNames.row}>
        <DetailsRow
          columns={props.columns}
          item={_footerItem}
          itemIndex={-1}
          selection={props.selection}
          selectionMode={(props.selection && props.selection.mode) || SelectionMode.none}
          rowWidth={props.rowWidth}
        />
      </div>
    </Sticky>
  );
};

let me know if this fixes for you

[msandora]

Thank you for the quick response Xugao. This did fix the error I ran into however I was unable to get this line to work correctly

    onRenderColumnHeaderTooltip: (tooltipHostProps: ITooltipHostProps) => <TooltipHost {...tooltipHostProps} />

Error: TS2345 (TS) Argument of type '{ onRenderColumnHeaderTooltip: (tooltipHostProps: ITooltipHostProps) => JSX.Element; columns: IColumn[]; selection: ISelection; ... 31 more ...; rowWidth?: number | undefined; }' is not assignable to parameter of type 'IDetailsHeaderProps'. Types of property 'onRenderColumnHeaderTooltip' are incompatible. Type '(tooltipHostProps: ITooltipHostProps) => JSX.Element' is not assignable to type 'IRenderFunction'. Types of parameters 'tooltipHostProps' and 'props' are incompatible. Type 'ITooltipHostProps | undefined' is not assignable to type 'ITooltipHostProps'. Type 'undefined' is not assignable to type 'ITooltipHostProps'.

[xugao]

@msandora - you can simply apply the same fix:

const onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
  if (!props) {
    return null;
  }

  const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> = tooltipHostProps => (
    <TooltipHost {...tooltipHostProps} />
  );

  return (
    <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced={true}>
      {defaultRender!({
        ...props,
        onRenderColumnHeaderTooltip
      })}
    </Sticky>
  );
};

[msandora]

Thank you. That worked.

[msft-github-bot]

:tada:This issue was addressed in #12150, which has now been successfully released as office-ui-fabric-react@v7.98.3.:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site