Текстовое поле должно быть доступно по двойному нажатию кнопки в Firefox

Question

Я новичок в Angular 4.

Я пытаюсь включить текстовое поле при двойном нажатии кнопки. Событие запускается, и текстовое поле включается, но из-за того, что кнопка перекрывает текстовое поле, текстовое поле становится недоступным. Он работает в Chrome, но не в Firefox.

Может кто-нибудь сказать мне, как я могу это исправить?

Я пытался заменить кнопку тегами div и p, но событие двойного щелчка не срабатывает. В текстовом поле события нет события двойного щелчка, которое мне нужно реализовать.

Думаю, это можно исправить с помощью css.

Если возможно, предоставьте демо-версию плунжера. Это будет очень полезно.

Ниже приведен HTML-код test.component.html

<button type="button" style="background-color: red;" (dblclick)="EnableTextBox2()">
<input [disabled]="!testTrue" type="text">
</button>

Ниже приведен код события test.component.ts

 testTrue:boolean=false;

  EnableTextBox2(){
    this.testTrue=true;
    alert('test fired');
  }