FieldNameRenderer's onClick does not suppress default link behavior

[JLRishe]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

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

Expected / Desired Behavior / Question

As indicated in the documentation, I would expect that specifying an onClick property on a FieldNameRenderer would cause the link's default behavior to be suppressed, but it is not. There also doesn't appear to be any API for preventing the link's default behavior (e.g. something analogous to event.preventDefault()).

Observed Behavior

The function indicated in the onClick property does run, but the link's default behavior also executes.

Steps to Reproduce

1. Use the @microsoft/sharepoint yeoman package to create a new field customizer extension with the name FieldNameCustomizer. When prompted for a framework, select React.
2. Install @pnp/spfx-controls-react using npm
3. Open the project in VS Code or some similar editor
4. Make the following to changes FieldNameCustomizer.tsx:

• Add the following imports:

import { FieldNameRenderer } from '@pnp/spfx-controls-react';
import { ListItemAccessor } from '@microsoft/sp-listview-extensibility';

• Change the IFieldNameCustomizerProps interface to:

export interface IFieldNameCustomizerProps {
    listItem: ListItemAccessor;
    fieldValue: any;
}

• Change the render() method to:

public render(): React.ReactElement<{}> {
    return (
        <FieldNameRenderer 
            isLink={true} 
            text={'link ' + this.props.fieldValue} 
            filePath={this.props.listItem.getValueByName('FileRef')} 
            onClick={() => console.log('clicked')} />
    );
}

5. Make the following change to FieldNameCustomizerFieldCustomizer.ts:

• Change the React.createElement(...) line to:

React.createElement(FieldNameCustomizer, { fieldValue: event.fieldValue, listItem: event.listItem });

6. Launch the server by running gulp serve --nobrowser
7. Create a new document library and upload one document to it. Ensure that you are viewing it in the Modern UI.
8. On the library's page in your browser, append the following to the page URL, replacing the (add customizer GUID here) portion with the customizer's actual GUID.

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"FileLeafRef":{"id":"(add customizer GUID here)","properties":{}}

9. Verify that the customizer is working by checking that the name of your file in the library is prepended with the text "link "
10. Open the browser console.
11. Click the filename

EXPECTED: "clicked" is logged to the console and nothing else happens
ACTUAL: "clicked" is logged to the console and then the link's default behavior takes place

[AJIXuMuK]

Thanks @JLRishe for posting this one!

I'll take a loot at it in next few days

[AJIXuMuK]

So, after talking to SharePoint dev team guys I will post an issue on GitHub for them.
The thing is that the default behavior of file preview/download is initiated from upper level of DOM.
And it looks like not even on onClick event because stopping the propagation and preventing default behavior doesn't help.
Basically, because of that, now both your onClick and default handler will be executed.
I will link this issue with the one for dev team as soon as I will create it.

[JLRishe]

@AJIXuMuK Thank you for looking into this so quickly!

[ralftokada]

Hi JL
I am trying to reproduce the point where you are now, since I need this feature also, but I am new to this developer environment. To start, I am having trouble finding the FieldNameCustomizer.tsx file, it is something you create from scratch? if so where, or it comes with the @pnp/spfx-controls-react install.

I had customized the FileLeafRef onclick event by means of the standard hello sample finding the same dual clicking behavior you experienced with the oob render. Perhaps modifying the href or target tag to nothing may work.

Any guide will be greatly appreciated

[JLRishe]

@ralftokada It might be better to open up a separate inquiry since your question is a bit off topic for the issue being reported here. The file I am referring to as "FieldNameCustomizer.tsx" is the boilerplate component file that's created when using yo @microsoft/sharepoint to create a field customizer with React. In step 1 of my repro steps, I indicated naming the field customizer "FieldNameCustomizer", in which situation the component file would be automatically named "FieldNameCustomizer.tsx".

[AJIXuMuK]

It looks like I was able to fix it without the bug for Dev Team :)

[JLRishe]

@AJIXuMuK That's great! Thank you so much.

[ralftokada]

Thanks Alex and JL,
Alex, I just downloaded what I believe the latest version using npm i @pnp/spfx-controls-react
Does it have this fix?, I tried it and still have the default onClick behaivor. Also I noticed there are no changes when setting the hasPreview parameter, unless I misunderstand it (I was hopping to see the preview when I hover the name link)
Sorry for my ignorance, this tools setup are new to me.

Thanks in advance

[AJIXuMuK]

Hi @ralftokada ,

No, it's not.
Please, see the referenced PR - it is still open and not merged to the main branch.
hasPreview parameter is needed to understand if we need to generate link for File Preview in SharePoint or link to directly download the file. It is actually a standard behavior as well. For example, SVG files don't have a preview and are downloaded directly.

[estruyf]

Thanks @AJIXuMuK this is planned to be released with the version 1.7.0.