fix: correct position for mention dropdown

projects/demo/src/app/pages/mention/examples/1/mention/index.html

@@ -1,15 +1,16 @@
-<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)"
-        ></tui-avatar>
-    </button>
+<tui-data-list>
+    <div #container>
+        <button
+            *ngFor="let item of getFilteredItems(items, mentionSuggestions)"
+            tuiOption
+            (click)="setMention.emit(item)"
+            (keydown.enter)="setMention.emit(item)"
+        >
+            {{ item.name }}
+            <tui-avatar
+                size="s"
+                [src]="item.avatar || (item.name | tuiInitials)"
+            ></tui-avatar>
+        </button>
+    </div>
 </tui-data-list>

projects/demo/src/app/pages/mention/examples/1/mention/index.ts

@@ -1,9 +1,12 @@
 import {
     ChangeDetectionStrategy,
     Component,
+    ElementRef,
     EventEmitter,
+    HostListener,
     Input,
     Output,
+    ViewChild,
 } from '@angular/core';
 import {tuiPure} from '@taiga-ui/cdk';
 
@@ -19,6 +22,9 @@ export interface User {
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MentionsComponent {
+    @ViewChild('container', {read: ElementRef})
+    private readonly container?: ElementRef<HTMLDivElement>;
+
     @Input()
     mentionSuggestions?: string;
 
@@ -48,4 +54,19 @@ export class MentionsComponent {
               )
             : 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;
+    }
 }

projects/tui-editor/components/editor/dropdown/dropdown-toolbar.directive.ts

@@ -39,7 +39,8 @@ export class TuiDropdownToolbarDirective extends TuiDropdownSelectionDirective {
                 range.commonAncestorContainer.parentElement?.closest('tui-dropdown');
 
             this.range =
-                contained && tuiIsTextNode(range.commonAncestorContainer)
+                (contained && tuiIsTextNode(range.commonAncestorContainer)) ||
+                range.commonAncestorContainer?.nodeName === 'P'
                     ? range
                     : this.range;