How to submit a dialog window when pushing "Enter key"?



  • Anyone know how I can submit my form in my dialog when I hit Enter?



  • Same question here


  • Admin

    const catchEnterKey = evt => {
        if (evt.which === 13 || evt.keyCode === 13) {
          dialog.close()
        }
      }
    window.addEventListener('keyup', catchEnterKey)
    
    const dialog = Dialog.create({
      ...........,
      onDismiss: () => { window.removeEventListener('keyup', catchEnterKey) }
    })
    

    Notice that when pressing ENTER key, no matter where the focus is in Dialog, will close it.



  • Thank you @rstoenescu



  • Thanks it almost works but I have a click handler on my button:

    this.dialog = dialog.create({
    ...
               form: {
                name: {
                  type: 'text',
                  label: 'New name',
                  model: basename
                }
              },
             buttons: [
             {
                  label: 'Rename',
                  color: 'positive',
                  outline: true,
                  // Click handler
                  handler: (data) => {
                    this.rename(data)
                  }
                },
                {
                  label: 'Cancel',
                  color: 'red',
                  outline: true
                }
              ],
             onDismiss: () => { window.removeEventListener('keyup', this.catchEnterKey) }
    })
    

    Which means this.rename does not fire when the dialog closes on Enter. And I can’t pass data to onDismiss


  • Admin

    @Zyme Added form data to close() and onDimsiss() on edge (will get into v0.14.7), so check that ;)
    Thanks for pointing this out.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.