SharePoint / SharePoint/sp-dev-docs
defaultHoverField profile card in formatted People column does not open until People web part is hovered first
Nobody has claimed this yet.
- Dominant language
- PowerShell
- Stars
- 1.4k
- Forks
- 1.1k
- Avg merge
- 4d 12h
- Merged PRs (30d)
- 12
Description
Target SharePoint environment
SharePoint Online
What SharePoint development model, framework, SDK or API is this about?
Declarative list formatting
Developer environment
None
What browser(s) / client(s) have you tested
- 💥 Internet Explorer
- 💥 Microsoft Edge
- 💥 Google Chrome
- 💥 FireFox
- 💥 Safari
- mobile (iOS/iPadOS)
- mobile (Android)
- not applicable
- other (enter in the "Additional environment details" area below)
Additional environment details
Microsoft Edge Version 149.0.4022.62 (Official build) (64-bit)
Google Chrome Version 149.0.7827.103 (Official build) (64-bit)
Describe the bug / error
A SharePoint Online List web part with JSON column formatting using defaultHoverField on a People field does not open the Microsoft profile card on hover when the page is first loaded.
The same profile card/runtime starts working only after interacting with a separate People web part on the same page.
This looks like a SharePoint List web part initialization bug: the list formatter renders the default-hovercard marker, but it does not bootstrap or register the Live Persona Card hover target until another People component loads the LPC runtime.
Microsoft documentation says defaultHoverField adds the profile card for People fields:
- Formatting syntax reference: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference#defaulthoverfield
- Advanced formatting, "Default cards on hover": https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-advanced#default-cards-on-hover
Column formatting used:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "img",
"style": {
"width": "32px",
"height": "32px",
"border-radius": "50%"
},
"attributes": {
"src": "=getUserImage(@currentField.email, 'S')",
"title": "=@currentField.title"
},
"defaultHoverField": "@currentField"
}
On cold page load, the formatted list cell is parsed by SharePoint and receives the expected formatter marker:
<div
class="sp-field-customFormatter"
default-hovercard="Editor0.0"
data-is-focusable="true">
<img title="Felipe Hertzer" ...>
</div>
However, it is not upgraded into a working Live Persona Card hover target. It is missing the runtime attributes/classes that appear on working LPC targets:
lpcCommonWeb-hoverTarget
data-lpc-hover-target-id
After interacting with a People web part, additional LPC scripts are loaded and the People web part target is upgraded, for example:
<div
class="... lpcCommonWeb-hoverTarget ..."
data-lpc-hover-target-id="lpc-react-target-0"
role="button"
aria-haspopup="dialog">
...
</div>
The List web part formatter element remains only:
<div class="sp-field-customFormatter" default-hovercard="Editor0.0">
...
</div>
Related prior issue: https://github.com/SharePoint/sp-dev-docs/issues/9845
That issue was marked fixed/closed, but the current behavior appears to be a regression or a separate unhandled path in the modern List web part on SharePoint pages.
Steps to reproduce
- Create a modern SharePoint page.
- Add a List web part.
- Use a list containing a People field, for example
Editor. - Apply JSON column formatting to the People field using
defaultHoverField, as shown above. - Publish/load the page in a fresh browser session or reload the page.
- Hover the formatted person image in the List web part.
- Observe that the profile card does not open.
- Add or use a People web part on the same page.
- Hover/interact with the People web part first.
- Return to the formatted List web part and hover the formatted People field again.
Expected behavior
The formatted People field in the List web part should open the Microsoft profile card directly on hover, without requiring the user to hover or interact with a People web part first.
The List web part should bootstrap/register the Live Persona Card runtime for elements rendered with defaultHoverField.
When a List web part renders a custom formatter containing defaultHoverField that resolves to a People field, the List web part should initialize the same profile card wrapper used by native People rendering. The formatted element should be hydrated into a real Live Persona Card hover target on page load or on first hover, without depending on a separate People web part.
@tpodugu-ms
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked formatting syntax and advanced formatting documentation, then review related issue #9845. Reproduce the cold-load behavior in a SharePoint Online List web part using the supplied JSON and compare it with behavior after interacting with a People web part. Done means the formatted People field opens its profile card on first hover without another web part.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100