fix(dialog): make dialog titles selectable

closes #19428

Author: Will-Smith-007

packages/primeng/src/dialog/dialog.spec.ts

@@ -308,6 +308,7 @@ describe('Dialog', () => {
             expect(dialogInstance.keepInViewport).toBe(true);
             expect(dialogInstance.rtl).toBe(false);
             expect(dialogInstance.role).toBe('dialog');
+            expect(dialogInstance.selectableTitle).toBe(false);
         });
 
         it('should accept custom input values', async () => {
@@ -1275,6 +1276,34 @@ describe('Dialog', () => {
             }
         });
 
+        it('should not initiate drag when mousedown is on title with selectableTitle enabled', async () => {
+            component.visible = true;
+            fixture.changeDetectorRef.markForCheck();
+            await fixture.whenStable();
+            await new Promise((resolve) => setTimeout(resolve, 0));
+
+            dialogInstance.selectableTitle = true;
+            spyOn(dialogInstance, 'initDrag');
+
+            const titleEl = fixture.debugElement.query(By.css('.p-dialog-title'));
+            titleEl?.nativeElement.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+            expect(dialogInstance.initDrag).not.toHaveBeenCalled();
+        });
+
+        it('should still initiate drag from non-title header area with selectableTitle enabled', async () => {
+            component.visible = true;
+            fixture.changeDetectorRef.markForCheck();
+            await fixture.whenStable();
+            await new Promise((resolve) => setTimeout(resolve, 0));
+
+            dialogInstance.selectableTitle = true;
+            spyOn(dialogInstance, 'initDrag');
+
+            const header = fixture.debugElement.query(By.css('.p-dialog-header'));
+            header?.nativeElement.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+            expect(dialogInstance.initDrag).toHaveBeenCalled();
+        });
+
         it('should handle resize initialization', async () => {
             component.resizable = true;
             fixture.changeDetectorRef.markForCheck();

packages/primeng/src/dialog/dialog.ts

@@ -96,7 +96,7 @@ const DIALOG_INSTANCE = new InjectionToken<Dialog>('DIALOG_INSTANCE');
                         <ng-template #notHeadless>
                             <div *ngIf="resizable" [class]="cx('resizeHandle')" [pBind]="ptm('resizeHandle')" [style.z-index]="90" (mousedown)="initResize($event)"></div>
                             <div #titlebar [class]="cx('header')" [pBind]="ptm('header')" (mousedown)="initDrag($event)" *ngIf="showHeader">
-                                <span [id]="ariaLabelledBy" [class]="cx('title')" [pBind]="ptm('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
+                                <span [id]="ariaLabelledBy" [class]="cx('title')" [pBind]="ptm('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT" (mousedown)="selectableTitle ? $event.stopPropagation() : null">{{ header }}</span>
                                 <ng-container *ngTemplateOutlet="_headerTemplate || headerTemplate || headerT; context: { ariaLabelledBy: ariaLabelledBy }"></ng-container>
                                 <div [class]="cx('headerActions')" [pBind]="ptm('headerActions')">
                                     <p-button
@@ -301,6 +301,11 @@ export class Dialog extends BaseComponent<DialogPassThrough> implements OnInit,
      * @group Props
      */
     @Input({ transform: booleanAttribute }) focusTrap: boolean = true;
+    /**
+     * When enabled, the title text is selectable and dragging only works on other parts of the header.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) selectableTitle: boolean = false;
     /**
      * Transition options of the animation.
      * @deprecated since v21.0.0. Use `motionOptions` instead.
@@ -842,6 +847,15 @@ export class Dialog extends BaseComponent<DialogPassThrough> implements OnInit,
         }
 
         if (this.draggable) {
+            if (this.selectableTitle) {
+                // Clear any selected title text when the user starts dragging from a non-title area.
+                // anchorNode is where the selection started and contains() ensures we only clear
+                // selections inside this dialog, leaving any selections outside untouched.
+                const selection = this.document.defaultView?.getSelection();
+                if (selection?.rangeCount && this.container()?.contains(selection.anchorNode)) {
+                    selection.removeAllRanges();
+                }
+            }
             this.dragging = true;
             this.lastPageX = event.pageX;
             this.lastPageY = event.pageY;

packages/primeng/src/dynamicdialog/dynamicdialog-config.ts

@@ -126,6 +126,11 @@ export class DynamicDialogConfig<DataType = any, InputValuesType extends Record<
      * @group Props
      */
     draggable?: boolean = false;
+    /**
+     * When enabled, the title text is selectable and dragging only works on other parts of the header.
+     * @group Props
+     */
+    selectableTitle?: boolean = false;
     /**
      * Keeps dialog in the viewport.
      * @group Props

packages/primeng/src/dynamicdialog/dynamicdialog.ts

@@ -41,6 +41,7 @@ const DYNAMIC_DIALOG_INSTANCE = new InjectionToken<DynamicDialog>('DYNAMIC_DIALO
             [maximizable]="maximizable"
             [keepInViewport]="keepInViewport"
             [focusTrap]="ddconfig?.focusTrap !== false"
+            [selectableTitle]="ddconfig?.selectableTitle"
             [transitionOptions]="ddconfig?.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'"
             [closeAriaLabel]="ddconfig?.closeAriaLabel || defaultCloseAriaLabel"
             [minimizeIcon]="minimizeIcon"