How to prevent ion-item from "item-interactive-disabled" when its child is disabled?

Ionic Framework
1

Suppose I have code:

<ion-item>
     <ion-input formControlName="someCtrl" [disabled]="lockControl"></ion-input>
     <ion-icon name="{{lockControl? 'unlock' : 'lock'}}" (click)="handler()"></ion-icon>
</ion-item>

When I click the ion-icon, the ion-input can be disabled as I expect. But unfortunately, the click event of ion-icon is also disabled as well, which I don’t expect. Then I discover that if I disable the input, whole ion-item become “item-interactive-disabled” so the icon is disabled.

How can I solve this problem?

2

Anyone can help me?

I want to separate the disability of child component from its parent!

3

try using readonly attribute

4

You can try to set pointer-events: none dynamically

5

I find my life easier when I limit myself to at most one user-interactable thing in an <ion-item>. Multiple ones tend to cause infighting over who gets events, and it sounds like this may be a cousin of that concern.

6

I used pointer-events: auto; instead. Thank you anyway.