Using Enter Key to Execute "Apply" Button, Escape to close modal

I am trying to incorporate functionality that essentially clicks the "Apply" button when I hit the enter key. And then closes the webix modal and discards changes when I hit the escape button.

I want the same "onBeforeApply" code to run as if I'm clicking the "Apply" button with my mouse.

popup: {
        on: {
           onEnter: function (event) {
                 this.onBeforeApply(); 
           }
      }
   }

When I put it there I get a console error saying this.onBeforeApply is not a function. Regardless of what function I am putting there I get that same error - not a function. This popup object is part of my configuration, which I am then passing into webix.ui:

const configuration = this.getConfiguration();
const interface = <webix.ui.pivot>webix.ui(configuration);

public getConfiguration() => {
    const configuration = {
         view: 'pivot',
         container: this.elementRef.nativeElement,
         id: 'pivot',
         data: this.data,
         footer: this.footer,
         totalColumn: this.totalColumn,
         popup: {
            on: {
               onEnter: function (event) {
                  this.onBeforeApply(); 
               }
            }
          },  
         datatable: {
               // datatable items
          },
          on: {
               onBeforeApply: structure => this.onBeforeApply(structure),
           }
       }
      return configuration;
  }

OnEnter within the popup is the only place I can seem to get the enter keypress event to fire.

How can I run onBeforeApply when I hit enter? And then close the modal/discard any changes when I hit escape?

Comments

  • try to convert onEnter to arrow function

    popup: {
            on: {
               onEnter: (event) => {
                     this.onBeforeApply(); 
               }
          }
       }
    
  • It doesn't catch the Enter key set up with an arrow function. The only time it fires is with "function()"

  • @newyear2020
    arrow function in just a "shortcut" for a bit expanded traditional function.
    check your code again. there should not be any difference between array and traditional functions for event triggering.

  • edited January 15

    Ok yea that does seem to run. The issue I'm seeing now is that when I trigger the enter key inside of the popup object as I have it above (from my initial post):

    popup: {
        on: {
           onEnter: (event) => {
                this.onBeforeApply(); 
           }
       }
    }

    Any changes or updated pivot table values aren't registered yet.

    In my code above (from my initial post) I have this line outside of my popup object which executes when I click the "Apply" button with my mouse:

    on: {
         onBeforeApply: structure => this.onBeforeApply(structure),
     }

    I need to run the exact same functionality on Enter keypress but I can't seem to trigger the Enter keypress event if I try to listen for that event at the same level as the click listener. Is it possible to do something like this:

    public getConfiguration() => {
           view: 'pivot',
           container: this.elementRef.nativeElement,
           id: 'pivot',
           data: this.data,
           footer: this.footer,
           totalColumn: this.totalColumn,
           popop: {
              // popup code. I can get the keypress event here but the updated pivot table values aren't there yet.
           }
           on: {
               onBeforeApply: structure => this.onBeforeApply(structure),
               onKeyPress: (code, event) => {
                      // I can't trigger anything here, is this possible?
                 }
           }
        return configuration;
    }
  • if you want to have pivot's structure as the argument you can try this

    popup: {
            on: {
               onEnter: (event) => {
                     this.onBeforeApply($$("pivot").getStructure()); 
               }
          }
       }
    
  • edited January 18

    yea the issue still seems to be the fact that the changes / updates don't trigger with the Enter key placed inside the popup. For example, when I click the Apply button with my mouse it triggers ngOnChanges in Angular, which does some updating of the values, but the enter key doesn't trigger that ngOnChanges, even if I do something like this:

    this.ngZone.runOutsideAngular(() => {
        this.ngZone.run(() => {
          this.onBeforeApply((<any>$$('pivot')).getStructure());
         });
     });

    or

    this.onBeforeApply((<any>$$('pivot')).getStructure());
    this.cd.detectChanges()

    So I think the core issue is that updates / changes aren't detected within Angular's ngOnChanges when the Apply button is triggered with the enter key. Any solutions for that outside of what I have mentioned?

  • edited January 18

    now I got what you want to achieve.
    you need to trigger native apply button click.
    check this
    https://snippet.webix.com/ap3b1s5j
    since original onKeyPress trigger does not work after popup focused, we should apply hack.
    we need to use original onKeyPress as hack does not work if window is not focused.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!