fix: correct position for mention dropdown

taiga-family · Jul 19, 2024 · aaaeec0 · aaaeec0
1 parent 8b3b5ab
commit aaaeec0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 15 deletions.
diff --git a/projects/demo/src/app/pages/mention/examples/1/mention/index.html b/projects/demo/src/app/pages/mention/examples/1/mention/index.html
@@ -1,15 +1,17 @@
-<tui-data-list (mouseleave.capture)="$event.stopPropagation()">
-    <button
-        *ngFor="let item of getFilteredItems(items, mentionSuggestions); let i = index"
-        tuiOption
-        [tuiAutoFocus]="i == 0"
-        (click)="setMention.emit(item)"
-        (keydown.enter)="setMention.emit(item)"
-    >
-        {{ item.name }}
-        <tui-avatar
-            size="s"
-            [src]="item.avatar || (item.name | tuiInitials)"
-        />
-    </button>
+<tui-data-list>
+    <div #container>
+        <button
+            *ngFor="let item of getFilteredItems(items, mentionSuggestions); let i = index"
+            #button
+            tuiOption
+            (click)="setMention.emit(item)"
+            (keydown.enter)="setMention.emit(item)"
+        >
+            {{ item.name }}
+            <tui-avatar
+                size="s"
+                [src]="item.avatar || (item.name | tuiInitials)"
+            />
+        </button>
+    </div>
 </tui-data-list>
diff --git a/projects/demo/src/app/pages/mention/examples/1/mention/index.ts b/projects/demo/src/app/pages/mention/examples/1/mention/index.ts
@@ -2,9 +2,12 @@ import {NgForOf} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
+    ElementRef,
     EventEmitter,
+    HostListener,
     Input,
     Output,
+    ViewChild,
 } from '@angular/core';
 import {TuiAutoFocus, tuiPure} from '@taiga-ui/cdk';
 import {TuiDataList, TuiInitialsPipe} from '@taiga-ui/core';
@@ -24,6 +27,9 @@ export interface User {
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Mentions {
+    @ViewChild('container', {read: ElementRef})
+    protected container?: ElementRef<HTMLDivElement>;
+
     protected readonly items: readonly User[] = [
         {
             name: 'Alexander Inkin',
@@ -53,4 +59,19 @@ export class Mentions {
               )
             : items;
     }
+
+    @HostListener('window:keydown.arrowUp', ['$event', 'false'])
+    @HostListener('window:keydown.arrowDown', ['$event', 'true'])
+    protected down(event: Event, isDown: boolean): void {
+        const buttons = Array.from(this.el?.querySelectorAll('button') ?? []);
+        const button = isDown ? buttons[0] : buttons[buttons.length - 1];
+
+        if (!this.el?.contains(event.target as any)) {
+            button.focus();
+        }
+    }
+
+    private get el(): HTMLDivElement | null {
+        return this.container?.nativeElement ?? null;
+    }
 }
diff --git a/projects/editor/src/components/editor/dropdown/dropdown-toolbar.directive.ts b/projects/editor/src/components/editor/dropdown/dropdown-toolbar.directive.ts
@@ -65,7 +65,8 @@ export class TuiEditorDropdownToolbar
                 range.commonAncestorContainer.parentElement?.closest('tui-dropdown');
 
             this.range =
-                contained && tuiIsTextNode(range.commonAncestorContainer)
+                (contained && tuiIsTextNode(range.commonAncestorContainer)) ||
+                range.commonAncestorContainer?.nodeName === 'P'
                     ? range
                     : this.range;