From f5ecf6619b4fae0f487d44b947f1c24fcaa4ce40 Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Fri, 21 Jun 2024 17:33:38 -0400
Subject: [PATCH] feat(edit-content) fix bug scrollHandler #28831

---
 ...ategory-field-category-list.component.html | 36 +++++++++----------
 ...-category-field-category-list.component.ts | 36 +++++++++++++------
 ...edit-content-category-field.component.html | 20 +++++------
 3 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html
index fd7df908b699..1ba1ba4bdc91 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.html
@@ -3,28 +3,28 @@
     [ngClass]="{ 'no-overflow-x-yet': emptyColumns().length }"
     class="flex-1 category-list__category-list">
     @for (column of categories(); let index = $index; track categories()[index]) {
-    <!--dynamic columns-->
-    <div #categoryColumn class="category-list__category-column">
-        @for (item of column; track item.inode) {
-        <div
-            class="flex align-content-center align-items-center category-list__item"
-            [ngClass]="{ 'category-list__item--selected': item.checked }"
-            (click)="itemClicked.emit({ index, item })">
-            <p-checkbox [(ngModel)]="itemsSelected" [value]="item.key" />
+        <!--dynamic columns-->
+        <div #categoryColumn class="category-list__category-column">
+            @for (item of column; track item.inode) {
+                <div
+                    class="flex align-content-center align-items-center category-list__item"
+                    [ngClass]="{ 'category-list__item--selected': item.checked }"
+                    (click)="itemClicked.emit({ index, item })">
+                    <p-checkbox [(ngModel)]="itemsSelected" [value]="item.key" />
 
-            <label
-                class="flex flex-grow-1 category-list__item-label"
-                [ngClass]="{ 'cursor-pointer': item.childrenCount > 0 }"
-                [for]="item.key"
-                >{{ item.categoryName }}</label
-            >
+                    <label
+                        class="flex flex-grow-1 category-list__item-label"
+                        [ngClass]="{ 'cursor-pointer': item.childrenCount > 0 }"
+                        [for]="item.key"
+                        >{{ item.categoryName }}</label
+                    >
 
-            @if (item.childrenCount > 0) {
-            <i class="pi pi-chevron-right category-list__item-icon"></i>
+                    @if (item.childrenCount > 0) {
+                        <i class="pi pi-chevron-right category-list__item-icon"></i>
+                    }
+                </div>
             }
         </div>
-        }
-    </div>
     }
 
     <!--Fake empty columns-->
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.ts
index 8f93b6e0be06..6f29b57c8c2d 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-category-list/dot-category-field-category-list.component.ts
@@ -94,16 +94,32 @@ export class DotCategoryFieldCategoryListComponent implements AfterViewInit {
     }
 
     private scrollHandler() {
-        const columnsArray = this.categoryColumns.toArray();
-        if (
-            columnsArray[MINIMUM_CATEGORY_WITHOUT_SCROLLING] &&
-            columnsArray[MINIMUM_CATEGORY_WITHOUT_SCROLLING].nativeElement.children.length > 0
-        ) {
-            columnsArray[columnsArray.length - 1].nativeElement.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start',
-                inline: 'start'
-            });
+        try {
+            const columnsArray = this.categoryColumns.toArray();
+
+            if (columnsArray.length === 0) {
+                return;
+            }
+
+            if (
+                columnsArray[MINIMUM_CATEGORY_WITHOUT_SCROLLING - 1] &&
+                columnsArray[MINIMUM_CATEGORY_WITHOUT_SCROLLING - 1].nativeElement.children.length >
+                    0
+            ) {
+                columnsArray[columnsArray.length - 1].nativeElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'end',
+                    inline: 'end'
+                });
+            } else {
+                columnsArray[0].nativeElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'start'
+                });
+            }
+        } catch (error) {
+            console.error('Error during scrollHandler execution:', error);
         }
     }
 }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
index 6a7c56159593..c6d5c3490b06 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/dot-edit-content-category-field.component.html
@@ -1,14 +1,14 @@
 @if (store.selectedCategories().length) {
-<div class="dot-category-field__categories" data-testId="category-chip-list">
-    @for (category of store.categoriesValue(); track category.key) {
-    <p-chip
-        [pTooltip]="category.value"
-        [removable]="true"
-        [label]="category.value"
-        tooltipPosition="top"
-        styleClass="p-chip-sm" />
-    }
-</div>
+    <div class="dot-category-field__categories" data-testId="category-chip-list">
+        @for (category of store.categoriesValue(); track category.key) {
+            <p-chip
+                [pTooltip]="category.value"
+                [removable]="true"
+                [label]="category.value"
+                tooltipPosition="top"
+                styleClass="p-chip-sm" />
+        }
+    </div>
 }
 
 <div class="dot-category-field__select">