Skip to content

[typeahead] Setting a tooltip in the layout of optionsListTemplate causes a console error, and the typeahead position is being controlled automatically even though adaptivePosition is not set. #6676

@tranquocbaodev

Description

@tranquocbaodev

Setting a tooltip in the layout of optionsListTemplate causes a console error, and the typeahead position is being controlled automatically even though adaptivePosition is not set.

ngx-bootstrap: ^12.0.0
Angular: 17.3.8
Bootstrap: 5.2.3

<div class="content" style="width: 200px;">
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre class="card card-block card-header mb-3">Model: {{selected | json}}</pre>
  <input
    [(ngModel)]="selected"
    [typeahead]="states"
    container="body"
    [optionsListTemplate]="customListTemplate"
    class="form-control"
  />
</div>

<ng-template #customListTemplate let-matches="matches" let-query="query" let-typeaheadTemplateMethods>
  <ul class="custom-list-group">
    <li
      class="custom-list-group-item"
      *ngFor="let match of matches"
      [class.active]="typeaheadTemplateMethods.isActive(match)"
      (click)="typeaheadTemplateMethods.selectMatch(match, $event)"
      (mouseenter)="typeaheadTemplateMethods.selectActive(match)"
      [tooltip]="match.item"
    >
      {{ match.item }}
    </li>
  </ul>
</ng-template>

It seems that when hovering over a record, the position of the tooltip is also controlling the typeahead, causing an error. I think this might be a bug in the position calculation service of the library.

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions