✨feat(grid): click on a blank space to deselect #WIK-16181

packages/grid/src/components/cell-editors/cell-editor.scss

@@ -3,3 +3,12 @@
         height: 100%;
     }
 }
+
+.text-cell-editor {
+    display: block;
+
+    textarea {
+        min-height: 44px;
+        resize: none;
+    }
+}

packages/grid/src/components/cell-editors/text/text-editor.component.ts

@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, inject, Renderer2 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ThyInputDirective } from 'ngx-tethys/input';
 import { ThyAutofocusDirective, ThyEnterDirective } from 'ngx-tethys/shared';
@@ -8,13 +8,54 @@ import { AbstractEditCellEditor } from '../abstract-cell-editor.component';
 @Component({
     selector: 'text-cell-editor',
     template: `
-        <input thyInput placeholder="" [thyAutofocus]="true" [(ngModel)]="modelValue" (thyEnter)="updateValue()" (blur)="updateValue()" />
+        <textarea
+            placeholder=""
+            thyInput
+            [thyAutofocus]="true"
+            [(ngModel)]="modelValue"
+            (ngModelChange)="valueChange()"
+            (thyEnter)="updateValue()"
+            (blur)="updateValue()"
+        ></textarea>
     `,
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective]
+    imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective],
+    host: {
+        class: 'd-block'
+    }
 })
-export class TextCellEditorComponent extends AbstractEditCellEditor<string> {
+export class TextCellEditorComponent extends AbstractEditCellEditor<string> implements AfterViewInit {
+    private elementRef = inject(ElementRef);
+
+    private render2 = inject(Renderer2);
+
+    private maxHeight = 148;
+
+    constructor() {
+        super();
+    }
+
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.updateStyle();
+        });
+    }
+
+    updateStyle() {
+        const textarea = this.elementRef.nativeElement.querySelector('textarea');
+        const height = textarea.scrollHeight <= this.maxHeight ? textarea.scrollHeight : this.maxHeight;
+
+        this.render2.setStyle(textarea, 'height', `${height}px`);
+        this.render2.setStyle(textarea, 'min-height', `44px`);
+        this.render2.setStyle(textarea, 'max-height', `${this.maxHeight}px`);
+        this.render2.setStyle(textarea, 'resize', 'none');
+    }
+
+    valueChange() {
+        this.updateStyle();
+    }
+
     updateValue() {
         this.updateFieldValue();
         this.closePopover();

packages/grid/src/grid.component.ts

@@ -26,6 +26,7 @@ import { ThyProgress } from 'ngx-tethys/progress';
 import { ThyRate } from 'ngx-tethys/rate';
 import { ThyStopPropagationDirective } from 'ngx-tethys/shared';
 import { ThyTag } from 'ngx-tethys/tag';
+import { mergeWith } from 'rxjs/operators';
 import { ProgressEditorComponent } from './components';
 import { FieldMenu } from './components/field-menu/field-menu.component';
 import { AITableFieldPropertyEditor } from './components/field-property-editor/field-property-editor.component';
@@ -178,11 +179,12 @@ export class AITableGrid implements OnInit {
             this.aiTableGridEventService.dblClickEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
                 this.dblClick(event);
             });
-            this.aiTableGridEventService.mousedownEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
-                if ((event as MouseEvent)?.target) {
-                    this.aiTableGridSelectionService.updateSelect(event as MouseEvent);
-                }
-            });
+            this.aiTableGridEventService.mousedownEvent$
+                .pipe(mergeWith(this.aiTableGridEventService.globalMousedownEvent$), takeUntilDestroyed(this.destroyRef))
+                .subscribe((event) => {
+                    this.aiTableGridSelectionService.updateSelect(event);
+                });
+
             this.aiTableGridEventService.mouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
                 this.mouseoverHandle(event);
             });

packages/grid/src/services/event.service.ts

@@ -21,6 +21,8 @@ export class AITableGridEventService {
 
     globalMouseoverEvent$ = new Subject<MouseEvent>();
 
+    globalMousedownEvent$ = new Subject<MouseEvent>();
+
     private destroyRef = inject(DestroyRef);
 
     private thyPopover = inject(ThyPopover);
@@ -54,6 +56,12 @@ export class AITableGridEventService {
             .subscribe((event) => {
                 this.mousedownEvent$.next(event);
             });
+
+        fromEvent<MouseEvent>(document, 'mousedown')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+                this.globalMousedownEvent$.next(event as MouseEvent);
+            });
     }
 
     private getEditorComponent(type: AITableFieldType) {
@@ -92,7 +100,8 @@ export class AITableGridEventService {
             outsideClosable: false,
             hasBackdrop: false,
             manualClosure: true,
-            animationDisabled: true
+            animationDisabled: true,
+            autoAdaptive: true
         });
         return ref;
     }

packages/grid/src/services/selection.servive.ts

@@ -52,7 +52,11 @@ export class AITableGridSelectionService {
     }
 
     updateSelect(event: MouseEvent) {
-        const target = event.target as HTMLElement;
+        const target = event?.target as HTMLElement;
+        if (!target) {
+            return;
+        }
+
         const cellDom = target.closest('.grid-cell');
         const colDom = target.closest('.grid-field');
         if (cellDom) {
@@ -64,5 +68,8 @@ export class AITableGridSelectionService {
             const fieldId = colDom.getAttribute('fieldId');
             fieldId && this.selectField(fieldId);
         }
+        if (!cellDom && !colDom) {
+            this.clearSelection();
+        }
     }
 }