Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x
[x] 4.x
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
Current behavior:
I have a block of html for an ionic page which checks in an amount of people, input by the user using an ion-input form field. This field also has a (keypress) event which triggers a popup 'prompt' div in the same html. When this pop up is enabled, the ion-input field should then be disabled and prevent the user from editing the input value.
The above prompt has a (keyup) event to proceed, however this is never called when [disabled]=true. If you change this to a [readonly] property it works as expected.
Expected behavior:
[disabled] should only disable the ion-input it is assigned to and not (keyup) events on parent ion-content.
Steps to reproduce:
Use the code snippet provided as html for an ionic page.
Changing [disabled] to [readonly] fixes this.
Related code:
<ion-content (keyup)="promptKeyUp($event)">
<form>
<p>Amount of people to check in</p>
<ion-row col-9>
<ion-col col-12>
<ion-input [disabled]="showPrompt" type="number" autofocus min="0" max="999" name="checkInTotal" #verifyInput (keypress)="checkIn()"></ion-input>
</ion-col>
</ion-row>
</form>
<div class="verify-prompt" *ngIf="showPrompt" >
<h4 class="verify-prompt-confirm">Press enter to confirm</h4>
<div>
<button tappable (click)="showPrompt = false" class="expoware-button" full ion-button color="light">Cancel</button>
</div>
</div>
</ion-content>
Other information:
In the above code snippet, checkIn() function would set showPrompt to true.
Unfortunately cannot provide the full app code due to complexity.
Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
cli packages: (C:\Users\user\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.19.1
ionic (Ionic CLI) : 3.19.1
global packages:
cordova (Cordova CLI) : not installed
local packages:
@ionic/app-scripts : 3.1.6
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2
System:
Node : v7.6.0
npm : 4.1.2
OS : Windows 10
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x
[x] 4.x
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
Current behavior:
I have a block of html for an ionic page which checks in an amount of people, input by the user using an ion-input form field. This field also has a (keypress) event which triggers a popup 'prompt' div in the same html. When this pop up is enabled, the ion-input field should then be disabled and prevent the user from editing the input value.
The above prompt has a (keyup) event to proceed, however this is never called when [disabled]=true. If you change this to a [readonly] property it works as expected.
Expected behavior:
[disabled] should only disable the ion-input it is assigned to and not (keyup) events on parent ion-content.
Steps to reproduce:
Use the code snippet provided as html for an ionic page.
Changing [disabled] to [readonly] fixes this.
Related code:
Other information:
In the above code snippet, checkIn() function would set showPrompt to true.
Unfortunately cannot provide the full app code due to complexity.
Ionic info: (run
ionic infofrom a terminal/cmd prompt and paste output below):