From af324815a368ff7a50056705fb2cd68754170a6e Mon Sep 17 00:00:00 2001
From: huanhuanwa <2323666215@qq.com>
Date: Fri, 9 Aug 2024 15:06:15 +0800
Subject: [PATCH] fix: close edit component and add space to default field name
 #WIK-16285

---
 packages/grid/src/core/utils/field.ts       | 2 +-
 packages/grid/src/services/event.service.ts | 6 +++++-
 src/app/app.component.html                  | 4 +++-
 src/app/app.component.scss                  | 2 +-
 src/app/app.component.ts                    | 3 ++-
 5 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/grid/src/core/utils/field.ts b/packages/grid/src/core/utils/field.ts
index c19edbe1..5085e85d 100644
--- a/packages/grid/src/core/utils/field.ts
+++ b/packages/grid/src/core/utils/field.ts
@@ -12,7 +12,7 @@ export function getDefaultFieldValue(field: AITableField) {
 export function createDefaultFieldName(aiTable: AITable, type: AITableFieldType = AITableFieldType.text) {
     const fields = aiTable.fields();
     const count = fields.filter((item) => item.type === type).length;
-    return count === 0 ? FieldsMap[type].name : FieldsMap[type].name + count;
+    return count === 0 ? FieldsMap[type].name : FieldsMap[type].name + ' ' + count;
 }
 
 export function createDefaultField(aiTable: AITable, type: AITableFieldType = AITableFieldType.text) {
diff --git a/packages/grid/src/services/event.service.ts b/packages/grid/src/services/event.service.ts
index 8c339765..647cefcf 100644
--- a/packages/grid/src/services/event.service.ts
+++ b/packages/grid/src/services/event.service.ts
@@ -6,6 +6,7 @@ import { GRID_CELL_EDITOR_MAP } from '../constants/editor';
 import { AITable, AITableField, AITableFieldType, AITableRecord } from '../core';
 import { AITableGridCellRenderSchema } from '../types';
 import { getRecordOrField } from '../utils';
+import { Overlay } from '@angular/cdk/overlay';
 
 @Injectable()
 export class AITableGridEventService {
@@ -25,6 +26,8 @@ export class AITableGridEventService {
 
     private destroyRef = inject(DestroyRef);
 
+    private overlay = inject(Overlay);
+
     private thyPopover = inject(ThyPopover);
 
     initialize(aiTable: AITable, aiFieldRenderers?: Partial<Record<AITableFieldType, AITableGridCellRenderSchema>>) {
@@ -101,7 +104,8 @@ export class AITableGridEventService {
             hasBackdrop: false,
             manualClosure: true,
             animationDisabled: true,
-            autoAdaptive: true
+            autoAdaptive: true,
+            scrollStrategy: this.overlay.scrollStrategies.close()
         });
         return ref;
     }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0680b43f..ed479d3b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,3 @@
-<router-outlet></router-outlet>
+<div cdkScrollable class="table-container">
+    <router-outlet></router-outlet>
+</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index eea78d8c..03b45d70 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,4 +1,4 @@
-app-root {
+.table-container {
     display: block;
     margin: 0 20px;
     margin-bottom: 0;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4d7bc9da..1e95b288 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,10 @@
+import { CdkScrollable } from '@angular/cdk/scrolling';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 @Component({
     selector: 'app-root',
     standalone: true,
-    imports: [RouterOutlet],
+    imports: [RouterOutlet, CdkScrollable],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush