Close an alert with keyboard AND retrieve its input value

Hi

I made an alert with the alert controller.
It display an input field for text, and 2 buttons (cancel and okay).

The purpose is to type a command and execute it.
-> it’s working. But i would like to to press “enter” on keyboard instead of pressing the “okay” button.

-> i’m able to close my alert by pressing the expected key, but then i’m unable to retrieve the content of the input key.

alert_window: any;

@HostListener('document:keydown.enter', ['$event'])
    onKeydownHandler(event: KeyboardEvent) {
        this.alert_window.dismiss();
    }

async presentAlert_Exec(containerName: string) {
        const alert = await this.alertController.create({
            header: 'Execute a command in ' + containerName + ' container',
            inputs: [
                {
                    name: 'CMD',
                    type: 'text',
                    placeholder: 'Cmd'
                }
            ],
            buttons: [
                {
                    text: 'Cancel',
                    role: 'cancel',
                    cssClass: 'secondary',
                    handler: () => {
                        console.log('Confirm Cancel');
                    }
                }, {
                    text: 'Exec',
                    role: 'send_command',
                    handler: () => {
                        console.log('Confirm Okay');
                    }
                }
            ]
            
        });

        this.alert_window = alert;

        await alert.present();
        let result = await alert.onDidDismiss();

        console.log(result);

        if ((result.role != 'backdrop') && (result.role != 'cancel')) {
            this.simConfig.Exec(containerName, result.data.values.CMD).then((result) => {
                console.log(result);
            });
        }
    }

-> Closing the alert with the “okay” button return the expected data
-> Canceling with ‘escape’ key or ‘cancel’ button work as expected
-> Pressing ‘enter’ does close the alert but returns undefined data

How can i dismiss the alert from code and retrieve the input value ?
Thank you :slight_smile:

The generally-accepted UI contract of the “enter” key depends on the currently-focused element. If the user tabs to focus the “Exec” button and then presses “enter”, the alert should dismiss as normal, containing the command, without further intervention on your part.

Thanks for your help :slight_smile: . Here is the solution i ended up with :

In the present_Alert function :

//Focus the input when the alert popup so the user can write his command directly
        await alert.present().then(() => {
            const firstInput: any = document.querySelector('ion-alert input');
            firstInput.focus();
            return;
        });

        this.alert_window = alert;

Outside of the function :

//Listen to the "enter" keyboard press event when the alert window (for exec or tmux) is open
    @HostListener('document:keydown.enter', ['$event'])
    onKeydownHandler(event: KeyboardEvent) {
        if (this.alert_window) {
            const okButton: any = document.querySelectorAll('ion-alert button')[1];
            okButton.click();
            this.alert_window.dismiss();
            this.alert_window = null;
        }
    }