FieldNameRenderer fails to encode URI when hasPreview={true}

[davehax]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.13.1 ]

(using SharePoint Framework 1.8.1 as well)

Expected / Desired Behavior / Question

Using the FieldNameRenderer (documentation here) to override the FileLeafRef / LinkFilename / LinkFilenameNoMenu controls should allow document previewing in sub-folders.

i.e. left click on a folder -> navigates you to the sub folder. left click on a document -> show document preview.

Observed Behavior

The URL's generated by the isLink={true} option fail to be URI encoded when paired with hasPreview={true}. SharePoint Online appears to have trouble with these links and displays the error message 'This item might not exist or is no longer available'.

The HREF attribute is set to

#id=/some/weird && folder/path/word-doc.docx&parent=/some/weird && folder/path

rather than what SharePoint Online does which is calling encodeURIComponent on the parameters

#id=%2Fsome%2Fweird%20%26%26%20folder%2Fpath%2Fword-doc.docx&parent=%2Fsome%2Fweird%20%26%26%20folder%2Fpath

Steps to Reproduce

1. Create a new FieldCustomizer (use JS lib React, of course)
2. Install @pnp/spfx-controls-react@1.13.1
3. Set up the React component to accept a ListItemAccessor as a property
4. In the render() method return a new element like so:

return (
  <div>
    <FieldNameRenderer 
                isLink={true}
                hasPreview={true}
                text={this.props.value}
                filePath={this.props.listItem.getValueByName('FileRef')}
    />
  </div>
);

This occurs in debug mode and also once deployed as an App to a site.

Setting the ClientSideComponentId for the FileLeafRef field can be done by using the PnP powershell lib and this command (substitute your own app id) . Note the inclusion of the flag '-UpdateExistingLists'.

Set-PnPField -Identity 'FileLeafRef' -Values @{ClientSideComponentId = [GUID]"e37746df-aaa9-4e3d-8120-578d6c514b57" } -UpdateExistingLists

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[davehax]

As a workaround I'm using the onClick and onDoubleClick callbacks then setting location.hash

for documents I set islink=true and hasPreview=true

    public onClickPreview(args: IFieldNameClickEventArgs): any {
        const parts: Array<string> = args.filePath.split('/');
        const parentPath: string = parts.slice(0, Math.max(parts.length - 1, 0)).join('/');

        location.hash = `#id=${encodeURIComponent(args.filePath)}&parent=${encodeURIComponent(parentPath)}`;

        return {};
    }

and for Folders I set isLink=true and hasPreview=false

    public onClickFolder(args: IFieldNameClickEventArgs): any {
        location.hash = `#id=${encodeURIComponent(args.filePath)}`;

        return {};
    }

[estruyf]

This fix has now been merged and will be available in the new release. You can already test it out by installing the latest beta version.

More information on how you can test out a beta version can be found here: https://sharepoint.github.io/sp-dev-fx-controls-react/beta/

[estruyf]

This has just been released in the version 1.13.2.