Handle alert action when keyboard enter key is hit

Ionic Framework
1

If I create an alert, how can I handle the Save button when the keyboard ‘Go’ button is pressed?

this.alertCtrl.create({
            header: 'YourAddress',
            message: 'What is your address?",
            inputs: [
                {
                    name: 'address',
                    type: 'text',
                    value: this.address,
                    placeholder: 'Address'
                }
            ],
            buttons: [
                {
                    text: 'Cancel',
                    handler: data => {
                        console.log('Cancel clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: data => {
                        console.log('SAVE DATA: ' + data);
                    }
                }
            ]
        }).then(alert => alert.present());

@HostListener('document:keydown.enter', ['$event']) onKeydownHandler(evt: KeyboardEvent) {
        console.log('enter key hit: How do I handle the alert as if the Save button was pressed? ');
    }
2

So the console.log on the keydown.enter is fired? Here is what i would do:

this.alertCtrl.create({
            header: 'YourAddress',
            message: 'What is your address?",
            inputs: [
                {
                    name: 'address',
                    type: 'text',
                    value: this.address,
                    placeholder: 'Address'
                }
            ],
            buttons: [
                {
                    text: 'Cancel',
                    handler: () => {
                        console.log('Cancel clicked');
                    }
                },
                {
                    text: 'Save',
                    handler: (data) => {
                        this.save(data);
                    }
                }
            ]
}).then(alert => {
  this.alert = alert;
  this.alert.onDidDismiss().then(() => {
    this.alert = undefined;
  });
  this.alert.present();
});

@HostListener('document:keydown.enter', ['$event']) onKeydownHandler(evt: KeyboardEvent) {
  if(this.alert) {
    // Get the Data from this.alert
    data = ?;
    this.alert.dismiss();
    this.save(data);
  }
}

So basically you save the Instance of the alert in a global variable. Also declare a Listener that will remove the variable when Alert is closed. On the Event Handler: Check if this variable is set, which means the Alert is open at the Moment. Here comes the tricky Part where i don’t know exactly if this works. You need to get the current input Value of the Alert. So i would suggest to debug at this Point, look into this.alert and check if you can see the Value there. If yes: Call your save Method with this data and do whatever you want. Don’t forget to hide the Input at this Point. If no: So i think it’s possible to get the Value on other ways, maybe over document but i’m only guessing.

3

Yup, that’s the tricky part.

4

I think there a two Options:

  1. Try like i describe with the this.alert. Maybe you can access through this.
  2. Give the Alert a css Class and try to grab the specifc input via document.getElementBy... and read the Value
5

#1 isn’t working for me.
Will try #2

6

Using cssClass, I get this when stringified:
{“s-p”:,“s-sc”:“sc-ion-alert-md”}

Not much to work with there.

7

I have also tried using id on the inputs and using getElementById.
Also tried binding the value of the inputs to a global variable.

8

Did you found any solution? I’m stuck at same problem.