需要点击两次才能触发<li>标签上的功能

Question

我的HTML中有以下代码段。
它有效，但 selectCompany（$ event，company）需要“两次点击”才会因某些原因而触发。
我该如何更改以下内容，因此该功能只需单击一下即可使用？

   <div class="row" *ngIf="companies.length > 0">
       <div class="col-lg-4">
          <div>
            <ul>
                <li class="" *ngFor="let company of companies; let index = index" (click)="selectCompany($event, company)">{{company.companyName}}</li>
            </ul>
          </div>
       </div>
     </div>

[更新]
完整的代码段如下所示 我想要做的是显示用户输入的公司列表（从服务器异步获取）。
选择其中一家公司后，它将显示为标签 我面临的问题是，当第一次选择公司时，输入文本字段保持聚焦（活动），因此需要两次点击。

<div id="custom-search" class="row">
   <div class="col-lg-4">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="company name" (keyup)="search($event)" (change)="search($event)">
      </div>
   </div>
   <div class="col-lg-4">
    <label>Selected: <b>{{selectedCompanyName}}</b></label>
   </div>
 </div>
 <div class="row" *ngIf="companies.length > 0">
   <div class="col-lg-4">
      <div class="auto-complete">
        <ul>
            <li *ngFor="let company of companies; let index = index" (click)="selectCompany($event, company)">{{company.companyName}}</li>
        </ul>
      </div>
   </div>
 </div>