How to disable ion-item focusing the input inside?

Ionic Framework Ionic Angular
1

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 :slight_smile:

I’ve also tried to stop all possible event propagations by clicking on the action buttons with no luck :frowning:

I’m on a version “@ionic/angular”: “^5.5.2”.

Any help would be highly apreciated!

Thanks in advance!

1 Like
2

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.