title: Textbox is to getting accessible on button double click in firefox
body: <p>I am new to Angular 4.</p>
  
  <p>I am trying to enable textbox on double click of button. Event is firing and textbox gets enabled but because of button overlaps textbox, the textbox gets inaccessible. It is working in Chrome but not in Firefox.</p>
  
  <p>Can anyone tell me how I can fix it?</p>
  
  <p>I tried to replace button with div and p tags but double click event is not firing. Event textbox does not have double click event I need to implement.</p>
  
  <p>I think it can be fixed through css.</p>
  
  <p>If possible please provide plunker demo. It will be very helpful.</p>
  
  <p>Below is html of <strong>test.component.html</strong></p>
  
  <pre><code>&lt;button type="button" style="background-color: red;" (dblclick)="EnableTextBox2()"&gt;
  &lt;input [disabled]="!testTrue" type="text"&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Below is event code <strong>test.component.ts</strong></p>
  
  <pre><code> testTrue:boolean=false;
  
    EnableTextBox2(){
      this.testTrue=true;
      alert('test fired');
    }
  </code></pre>