ng-click not working on child input tag (mozilla firefox)

Question

<div ng-click="hello()">
    <input type="password" disabled>
</div>

i have got the above HTML script .

parent div has a click function . when i click on child input tag in firefox the click event of parent is not working however in chrome it is working fine . removing disabled from input tag will make it work fine on mozilla , however i require this input tag to be disabled.

how to make it work on firefox without eliminating disabled from input tag

Answer 1

I know this is an old question, but since I just lost the better part of an hour on the same issue while working on my angular 8 project, I thought I'd anyway post the answer that worked for me.

First off, this is not really an Angular issue, but a Firefox issue. It seems that Firefox simply does not fire click events from disabled input fields. Therefore, when clicking the input, there is no event to propagate to the parent. Checkout this thread for more information: Event on a disabled input. Incidentally, I found this solution in a comment on the accepted answer, so credit goes to Doin.

So the easiest way around this behavior is by adding the following css style to the input element:

pointer-events: none;

This prevents the element from reacting to pointer events, which means that the pointer event is also not "absorbed" by the disabled input and fires from the parent element.

See below for a complete example:

function hello() {
  document.getElementById('demo').innerHTML = 'Hi there!';
}

div {
  background-color: aqua;
  cursor: pointer;
}

div input:disabled {
  pointer-events: none;
}

<div onClick="hello()">
    <input type="password" disabled>
</div>

<span id="demo"></span>

Answer 2

Have you tried it with readonly instead of disabled?

<div ng-click="hello()">
<input type="password" readonly>
</div>