Callout Content - docs specify "HTML" but renders markup

Category

• Enhancement
• Bug
• Question

Version

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

Expected / Desired Behavior / Question

The docs for any control with Callouts for example state that the callout content can be any HTML -

Callout content - any HTML

Pop in some HTML into the calloutContent prop, e.g. <h1>This is a test</h1>

I’d hope the HTML to be rendered in the callout.

Observed Behavior

The callout is rendered with the HTML markup (as if it were escaped).

It may be that you need to pass in a React element, however this control is used in the base Web Part class which is .ts rather than .tsx. When I renamed my base webpart class to .tsx however, a strings file (from locales) failed to load, so I’m wondering if renaming to .tsx isn’t supported in the SPFX toolchain.

[AJIXuMuK]

Hi @jimmywim! Sorry for the confusion with the documentation. If you provide a string, even if it contains HTML, it will just render the string as text. If you want to provide HTML, you should create a React.ReactNode object. In the web part you can do it like that:

PropertyFieldLinkWithCallout('fakeProp', {
  calloutTrigger: CalloutTriggers.Click,
  key: 'linkWithCalloutFieldId',
  calloutContent: React.createElement('p', {}, 'Click the link to open a new page with Application Terms & Conditions'),
  calloutWidth: 200,
  text: 'Terms & Conditions',
  href: 'https://github.com/SharePoint/sp-dev-fx-property-controls',
  target: '_blank'
})

Hope it helps!

[msftbot[bot]]

Closing issue as “answered”. If you encounter similar issue(s), please open up a NEW issue. Thank you.