SharePoint
List view formatting: customCardProps triggered to fast or not at all (MS lists view in Sharepoint list)
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
- [X] 💥 Google Chrome
- [ ] 💥 FireFox
- [ ] 💥 Safari
- [ ] mobile (iOS/iPadOS)
- [ ] mobile (Android)
- [ ] not applicable
- [ ] other (enter in the "Additional environment details" area below)
Additional environment details
Chrome 127
Describe the bug / error
customCardProps do not work properly in new list experience. Moving the mouse over such items, triggers the popup too fast and sometimes not at all. Sometimes the popups do not hide again. This behaviour was different in the old list and is still different in document libraries.
New List experience: https://github.com/user-attachments/assets/bd8fa9b4-9292-444c-9406-ac76dbce2573
Document library: https://github.com/user-attachments/assets/6df51990-c05f-409f-8390-a18cae40e2b3
Steps to reproduce
- Create a list
- Add a column (e.g. multiple choice in this example)
- Add custom json to column with customCardProps (example below)
- Move mouse over the customCardProps items
Column formatting example:
`{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"flex-wrap": "wrap",
"display": "flex"
},
"children": [
{
"forEach": "__INTERNAL__ in @currentField",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "4px 8px 5px 8px",
"overflow": "hidden",
"text-overflow": "ellipsis",
"display": "flex",
"border-radius": "16px",
"height": "24px",
"align-items": "center",
"white-space": "nowrap",
"margin": "4px 4px 4px 4px"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$__INTERNAL__]",
"Auswahl 1"
]
},
"sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-css-color-CoralFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$__INTERNAL__]",
"Auswahl 2"
]
},
"sp-css-backgroundColor-BgDustRose sp-css-borderColor-DustRoseFont sp-css-color-DustRoseFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$__INTERNAL__]",
"Auswahl 3"
]
},
"sp-css-backgroundColor-BgPeach sp-css-borderColor-PeachFont sp-css-color-PeachFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$__INTERNAL__]",
"Auswahl 4"
]
},
"sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-css-color-GoldFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$__INTERNAL__]",
"Auswahl 5"
]
},
"sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-css-color-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$__INTERNAL__]",
"Auswahl 6"
]
},
"sp-css-backgroundColor-BgCyan sp-css-borderColor-CyanFont sp-css-color-CyanFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$__INTERNAL__]",
"Auswahl 7"
]
},
"sp-css-backgroundColor-BgSage sp-css-borderColor-SageFont sp-field-fontSizeSmall sp-css-color-SageFont",
"sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
]
}
]
}
]
}
]
}
]
}
]
}
]
}
},
"txtContent": "[$__INTERNAL__]",
"customCardProps": {
"formatter": {
"elmType": "div",
"style": {
"padding": "12px"
},
"txtContent": "Hallo Welt!"
},
"openOnEvent": "hover",
"directionalHint": "topAutoEdge",
"isBeakVisible": true
}
}
]
}
Expected behavior
Popup of customCardProps should only be trigged after a short delay. After leaving the popup with the mouse, it should hide again after a short delay.
Maybe another aspect is that you would not expect that multiple popups appear at the same time and are overlapping each other.
@XueSheng-GIT Thanks for reporting the issue. We will work on this on priority and update you the ETA.
@tpodugu-ms any progress on this matter? The issue still persists and I'm getting more an more complaints because the customCardProps do not work properly.
@tpodugu-ms Sorry to bug you again. Any info to the ETA? This bug is quite annoying becaus those accidentially triggered customCardProps also overlay the list form so that info is hidden or fields cannot be filled (you first need to close the form, try to get rid of the accidentially triggered customCardProps and open the list form again.
Hi @XueSheng-GIT. Team is actively working on the custom formatter issues. I will check with them and update.
@tpodugu-ms any news in regards to this issue? In the meantime the situation did not improve in any way.
@XueSheng-GIT, Thank you for your continued patience.
We wanted to confirm that the issue still persists on our side as well. We have already logged this as a bug with our engineering team.
We understand this is causing inconvenience, especially with overlapping cards affecting form usability.
@Ashlesha-MSFT thanks for asking. The issue still persits in Lists and Document libraries. It's not only the overlapping, which is an issue, but also the fact that sometimes the hover cards do not appear at all.
@Ashlesha-MSFT Any news regarding this issue? It's now one year old without any progress. Issue still persists and makes it hard to work with customCardProps and openOnEvent: "hover".
The parallel issue regarding Document libraries (https://github.com/SharePoint/sp-dev-docs/issues/10210) didn't see any progress too.