动态设置焦点在垫子按钮上不起作用

Question

在我的应用程序中，我有一个输入字段，用户可以在其中输入城市代码，并且将调用 focus out 服务以获取城市详细信息，搜索按钮将被启用并获得焦点。当用户输入城市代码并跳出时，一切都按预期进行，但焦点未设置为“搜索”按钮。我知道禁用的按钮不会收到焦点事件，但只有在启用按钮后才设置焦点，但它似乎仍然不起作用。

Ts

export class InputErrorsExample {
  city = new FormControl('');
  search: boolean = false;

  fetchCityDetails() {
    setTimeout(() => {
      // calling service to fetch details
      this.search = true;
      let btn = document.getElementById('search');
      if (btn) btn.focus();
    }, 1000);
  }
}

HTML

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>City</mat-label>
    <input type="text" matInput [formControl]="city" (focusout)="fetchCityDetails()">

  </mat-form-field>

  <button tabindex="0" id="search"  mat-raised-button color="primary" [disabled] = "!search">Search</button>

</form>

这是 stackblitz https://stackblitz.com/edit/angular-ymkvhp?file=src%2Fapp%2Finput-errors-example.html 的 link。

Answer 1

尝试用另一个 setTimeout 延迟按钮的焦点

 fetchCityDetails() { 
    setTimeout(() => {
      // calling service to fetch details
      this.search = true;
      setTimeout(()=>{
        let btn = document.getElementById('search');
        if (btn) btn.focus();
      })
    }, 1000);
  }

动态设置焦点在垫子按钮上不起作用

Setting focus on mat button dynamically not working

angular

typescript

button

angular-material

focus