sp-dev-docs icon indicating copy to clipboard operation
sp-dev-docs copied to clipboard

Microsoft Lists: date picker shown on the upper-left corner of UI when inlineEditField JSON property is applied to a date column

Open Fedes365 opened this issue 7 months ago • 3 comments

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

not applicable

Developer environment

None

What browser(s) / client(s) have you tested

  • [ ] 💥 Internet Explorer
  • [X] 💥 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

  • Microsoft Edge Version 126.0.2592.102 (Official build) (64-bit)
  • Google Chrome Version 126.0.6478.127 (Official build) (64-bit)

Describe the bug / error

When "inlineEditField" JSON property is applied to a DateTime column, the related date picker appears on the upper-left corner of Microsoft Lists user interface:

inlineEditField bug

Furthermore, the placeholder letters related to week days are displayed based on a wrong language. For example, here is what's happening with italian UI:

immagine

Just for curiosity, I had a look at what's going on behind the scenes and here is the result in my browser DOM:

immagine



This bug has been confirmed by @tecchan1107 too.

Steps to reproduce

  1. Create a new list
  2. Add a date-time column named "Start" (just as an example)
  3. Click on Column setting --> Click on Format this column --> Click on Advanced mode
  4. Apply the following basic JSON code and save:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "inlineEditField": "[$Start]", "style": { "box-sizing": "border-box", "padding": "0 2px", "overflow": "hidden", "text-overflow": "ellipsis" }, "attributes": { "class": "sp-field-fontSizeMedium sp-css-color-BlackText sp-field-bold" }, "txtContent": "[$Start.displayValue]" }

Expected behavior

When clicking on a cell to trigger the inlineEditField property, the date picker should appear positioned exactly over its underlying cell.

Fedes365 avatar Jul 27 '24 17:07 Fedes365