Hi Everyone!
Is there any way of preventing the click by the ion-item to focus on the input inside?
My case is that I’m having the ion-item wrapped into the ion-item-sliding. Inside the ion-item I have multiple inputs and action buttons (basically I have a table grid built using the ion-item-sliding components). And wherever I’m clicking, it focuses me on the input element which is enabled. It might be fine for all of the cases, except when I click on the action buttons, which are supposed to display the popover, but definitelly not to open the keyboard 
I’ve also tried to stop all possible event propagations by clicking on the action buttons with no luck 
I’m on a version “@ionic/angular”: “^5.5.2”.
Any help would be highly apreciated!
Thanks in advance!
1 Like
I have little bit same problem. ion-item-sliding has ion-item inside, which has one ion-input. And it has focus at every click on ion-item, and shows keyboard on mobile phone.
Solution: wrap content in ion-item in div:
< div class=“item-wrapper” (click)=“blurInput($event)” >
…
< ion-input #myNumberInput (click)=“focusInput($event)” [(ngModel)]=“quantity” >< /ion-input >
…
< /div >
in ts:
@ViewChild(‘myNumberInput’, { static: false }) myNumberInput: IonInput;
public focusInput(event) {
event.preventDefault();
event.stopPropagation();
this.myNumberInput.getInputElement().then((inputElement: HTMLInputElement) => inputElement.focus());
}
public blurInput(event = null) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
if (this.myNumberInput) {
this.myNumberInput.getInputElement().then((inputElement: HTMLInputElement) => {
setTimeout(() => inputElement.blur(), 0);
});
}
}
So, blurInput() - fixes autofocus on input. focusInput() - let you focus on input when you need it.