From 60ec1b7b2a3a53b3ef9e34eadd7ff7606857a97d Mon Sep 17 00:00:00 2001
From: Adrian Molina <adrian.molina@dotcms.com>
Date: Tue, 30 Jun 2026 10:15:33 -0400
Subject: [PATCH] fix(edit-content): date pickers use fixed width and stay open
 until click-outside (#36156)

Date, Date/Time and Time field pickers in the new Edit Contentlet were
stretching to full width and closing as soon as a date was clicked,
preventing users from picking the time portion.

- Remove the w-full / inputStyleClass overrides and force-width SCSS so the
  picker uses PrimeNG's default datepicker sizing instead of full width.
- Set [hideOnDateTimeSelect]="false" so the panel stays open after a date
  selection and only closes on click-outside, consistent across all three
  field types. The value is still applied on (onSelect).
- Add spec coverage for both behaviors across Date, Date/Time and Time.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../calendar-field.component.html             |  3 +-
 .../calendar-field.component.scss             |  4 +-
 ...t-content-calendar-field.component.spec.ts | 55 +++++++++++++++++++
 3 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.component.html
index 68017e2d6ba5..2a2aac8d939a 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.component.html
@@ -3,14 +3,13 @@
 @let fieldTypeConfig = $fieldTypeConfig();
 
 <p-datepicker
-    class="w-full"
-    [inputStyleClass]="'w-full'"
     [class.ng-invalid]="hasError"
     [class.ng-dirty]="hasError"
     [formControl]="internalFormControl"
     [defaultDate]="$defaultDate()"
     [timeOnly]="fieldTypeConfig.timeOnly"
     [showTime]="fieldTypeConfig.showTime"
+    [hideOnDateTimeSelect]="false"
     (onSelect)="onCalendarChange($event)"
     (onClearClick)="onCalendarChange(null)"
     (onClear)="onCalendarChange(null)"
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.component.scss
index 8b86406a13b3..2dd60fd15128 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.component.scss
@@ -2,8 +2,8 @@
 // the ring encloses both the input and the calendar icon button as one unit.
 
 :host ::ng-deep p-datepicker {
-    display: flex;
-    width: 100%;
+    // Use PrimeNG's default datepicker sizing
+    display: inline-flex;
     border-radius: var(--p-inputtext-border-radius);
     transition:
         border-color var(--p-inputtext-transition-duration),
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.spec.ts
index 661cd9214d7c..485a14336d8e 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.spec.ts
@@ -442,6 +442,61 @@ describe('DotEditContentCalendarFieldComponent', () => {
         });
     });
 
+    describe('Picker presentation (issue #36156)', () => {
+        const buildHost = (fieldType: FIELD_TYPES) => {
+            const field = { ...DATE_FIELD_MOCK, fieldType };
+            spectator = createHost(
+                `<form [formGroup]="formGroup">
+                    <dot-edit-content-calendar-field [field]="field" [contentlet]="contentlet" [utcTimezone]="utcTimezone" [contentType]="contentType" />
+                </form>`,
+                {
+                    hostProps: {
+                        formGroup: new FormGroup({
+                            [field.variable]: new FormControl()
+                        }),
+                        field,
+                        utcTimezone: null,
+                        contentType: CONTENT_TYPE_WITHOUT_EXPIRE,
+                        contentlet: createFakeContentlet({
+                            [field.variable]: null
+                        })
+                    }
+                }
+            );
+            spectator.detectChanges();
+        };
+
+        const FIELD_TYPES_UNDER_TEST = [
+            ['Date', FIELD_TYPES.DATE],
+            ['Date/Time', FIELD_TYPES.DATE_AND_TIME],
+            ['Time', FIELD_TYPES.TIME]
+        ] as const;
+
+        it.each(FIELD_TYPES_UNDER_TEST)(
+            'should keep the %s picker open on selection (closes only on click-outside)',
+            (_label, fieldType) => {
+                buildHost(fieldType);
+
+                const calendar = spectator.query(DatePicker);
+                expect(calendar.hideOnDateTimeSelect).toBe(false);
+            }
+        );
+
+        it.each(FIELD_TYPES_UNDER_TEST)(
+            'should render the %s picker at PrimeNG default width, not full width',
+            (_label, fieldType) => {
+                buildHost(fieldType);
+
+                // No full-width override is applied; PrimeNG default sizing is used.
+                const calendar = spectator.query(DatePicker);
+                expect(calendar.inputStyleClass).toBeFalsy();
+
+                const datepickerEl = spectator.query('p-datepicker');
+                expect(datepickerEl?.classList.contains('w-full')).toBe(false);
+            }
+        );
+    });
+
     describe('Default value handling', () => {
         beforeEach(() => {
             // Mock utility functions