feat(uve): Fix same-page navigation handling with anchors with id (#35326)

- Added utility to determine if a URL change is a same-page navigation
(hash-only or query-only).
- Updated  to prevent triggering page load for same-page navigations.
- Enhanced tests in  to cover various same-page navigation scenarios.
- Modified  to utilize the new utility for navigation updates.
- Updated to exclude hash-only links from triggering navigation actions.

This change improves user experience by preventing unnecessary page
reloads during internal navigation events.


https://github.com/user-attachments/assets/e4c9c2c5-3422-4054-9040-167a70ed5731


This PR fixes: #35324

Author: KevinDavilaDotCMS

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-iframe/dot-uve-iframe.component.ts

@@ -4,13 +4,13 @@ import {
     ChangeDetectionStrategy,
     Component,
     DestroyRef,
-    ElementRef,
-    OnDestroy,
-    ViewChild,
     effect,
+    ElementRef,
     inject,
     input,
-    output
+    OnDestroy,
+    output,
+    ViewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@@ -196,7 +196,13 @@ export class DotUveIframeComponent implements OnDestroy {
             .pipe(
                 filter((e) => {
                     const target = e.target as HTMLElement;
-                    const hasLink = !!target.closest('a')?.getAttribute('href');
+                    const linkElement = target.closest('a');
+                    const href = linkElement?.getAttribute('href');
+
+                    // Exclude hash-only links (e.g., #sectionA) - these are same-page anchors
+                    const isHashOnly = href?.startsWith('#');
+
+                    const hasLink = !!href && !isHashOnly;
                     const hasInlineEditTarget =
                         !!target.closest('[data-mode]') || !!target.dataset?.mode;
                     return hasLink || hasInlineEditTarget;

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts

@@ -92,7 +92,7 @@ import { EditEmaEditorComponent } from './edit-ema-editor.component';
 import { DotBlockEditorSidebarComponent } from '../components/dot-block-editor-sidebar/dot-block-editor-sidebar.component';
 import { DotEmaDialogComponent } from '../components/dot-ema-dialog/dot-ema-dialog.component';
 import { DotActionUrlService } from '../services/dot-action-url/dot-action-url.service';
-import { DotPageApiService } from '../services/dot-page-api/dot-page-api.service';
+import { DotPageApiParams, DotPageApiService } from '../services/dot-page-api/dot-page-api.service';
 import { DotUveActionsHandlerService } from '../services/dot-uve-actions-handler/dot-uve-actions-handler.service';
 import { DotUveDragDropService } from '../services/dot-uve-drag-drop/dot-uve-drag-drop.service';
 import { InlineEditService } from '../services/inline-edit/inline-edit.service';
@@ -152,7 +152,7 @@ const mockGlobalStore = {
 };
 
 const mockDotUveActionsHandlerService = {
-    handleAction: jest.fn(() => of({}))
+    handleAction: jest.fn((_message: unknown, _deps: unknown) => of({}))
 };
 
 const mockDotUveDragDropService = {
@@ -2343,6 +2343,107 @@ describe('EditEmaEditorComponent', () => {
                     expect(mockEvent.preventDefault).toHaveBeenCalled();
                 });
 
+                describe('same-page navigation (same pathname)', () => {
+                    const samePathPageParams = (): DotPageApiParams => ({
+                        url: '/current-page',
+                        language_id: '1',
+                        [PERSONA_KEY]: DEFAULT_PERSONA.identifier
+                    });
+
+                    beforeEach(() => {
+                        jest.spyOn(store, 'pageParams').mockReturnValue(samePathPageParams());
+                    });
+
+                    it('should not trigger pageLoad for hash-only navigation on same page', () => {
+                        const hashUrl = 'http://localhost:3000/current-page#sectionA';
+                        const mockEvent = createMockEvent(hashUrl);
+
+                        spectator.component.handleInternalNav(mockEvent);
+
+                        expect(pageLoadSpy).not.toHaveBeenCalled();
+                        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+                    });
+
+                    it('should not trigger pageLoad for hash-only with complex id', () => {
+                        const hashUrl = 'http://localhost:3000/current-page#section-123_complex';
+                        const mockEvent = createMockEvent(hashUrl);
+
+                        spectator.component.handleInternalNav(mockEvent);
+
+                        expect(pageLoadSpy).not.toHaveBeenCalled();
+                    });
+
+                    it('should not trigger pageLoad for query-only navigation on same page', () => {
+                        const queryUrl = 'http://localhost:3000/current-page?tab=2';
+                        const mockEvent = createMockEvent(queryUrl);
+
+                        spectator.component.handleInternalNav(mockEvent);
+
+                        expect(pageLoadSpy).not.toHaveBeenCalled();
+                        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+                    });
+
+                    it('should not trigger pageLoad for multiple query params on same page', () => {
+                        const queryUrl =
+                            'http://localhost:3000/current-page?filter=value&sort=date';
+                        const mockEvent = createMockEvent(queryUrl);
+
+                        spectator.component.handleInternalNav(mockEvent);
+
+                        expect(pageLoadSpy).not.toHaveBeenCalled();
+                    });
+
+                    it('should not trigger pageLoad when both hash and query are present on same path', () => {
+                        const combinedUrl = 'http://localhost:3000/current-page?tab=2#section';
+                        const mockEvent = createMockEvent(combinedUrl);
+
+                        spectator.component.handleInternalNav(mockEvent);
+
+                        expect(pageLoadSpy).not.toHaveBeenCalled();
+                        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+                    });
+
+                    it('should trigger pageLoad when navigating to different page with hash', () => {
+                        const differentPageUrl = 'http://localhost:3000/other-page#section';
+                        const mockEvent = createMockEvent(differentPageUrl);
+
+                        spectator.component.handleInternalNav(mockEvent);
+
+                        expect(pageLoadSpy).toHaveBeenCalledWith({
+                            url: '/other-page'
+                        });
+                        expect(mockEvent.preventDefault).toHaveBeenCalled();
+                    });
+
+                    it('should trigger pageLoad when navigating to different page with query', () => {
+                        const differentPageUrl = 'http://localhost:3000/other-page?tab=1';
+                        const mockEvent = createMockEvent(differentPageUrl);
+
+                        spectator.component.handleInternalNav(mockEvent);
+
+                        expect(pageLoadSpy).toHaveBeenCalledWith({
+                            url: '/other-page',
+                            tab: '1'
+                        });
+                        expect(mockEvent.preventDefault).toHaveBeenCalled();
+                    });
+
+                    it('should handle root path hash navigation', () => {
+                        jest.spyOn(store, 'pageParams').mockReturnValue({
+                            url: '/',
+                            language_id: '1',
+                            [PERSONA_KEY]: DEFAULT_PERSONA.identifier
+                        });
+
+                        const hashUrl = 'http://localhost:3000/#top';
+                        const mockEvent = createMockEvent(hashUrl);
+
+                        spectator.component.handleInternalNav(mockEvent);
+
+                        expect(pageLoadSpy).not.toHaveBeenCalled();
+                    });
+                });
+
                 afterEach(() => {
                     jest.clearAllMocks();
                 });

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts

@@ -111,6 +111,7 @@ import {
     getTargetUrl,
     getWrapperMeasures,
     insertContentletInContainer,
+    isSamePageNavigation,
     shouldNavigate
 } from '../utils';
 
@@ -629,6 +630,11 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy, AfterViewInit
             return;
         }
 
+        // Same pathname (any hash/query): let the browser handle it (anchors, query-driven UI)
+        if (isSamePageNavigation(href, this.uveStore.pageParams()?.url)) {
+            return;
+        }
+
         this.uveStore.pageLoad({ url: url.pathname, ...urlQueryParams });
         e.preventDefault();
     }