How to prevent ENTER to open select popup

  • Hi.

    I have serious needs to control the keyboard on my project and specially the ENTER and ESC keys that on this particular project, plays a role of a special navigational keys.

    I have an imperative need to block the select popup to show based on some internal checks I have to do. Never mind the user still can click and open the select, but NOT with ENTER key under specific conditions.

    So, I need a way to listen to some event (or “beforeEvent”) and then do my block logic inside.

    How, please? I’ve had trapped the normal key(up/down/press) without success, as it seems that the quasar event that popped it up already happened.

    Can someone shed some light on this? Could quasar start to implement some “before” events and publish some blocking props for common behaviour of the components?


  • @rstoenescu , I know that I may be on an edge case here, but a couple of simple props, like useEnterKey (boolean default true) and useDownKey (boolean default true) would do wonders in this case, as one could set the desired key to false, trap the key event, do their thing and if necessary, call showPopup at the end. Win / win.

    That can be done?


  • Well, trying to monkey patch my way trough this I’m intercepting showPopup to block it if I need to.

    The QSelect.js implements it like this:

    showPopup (e) {
          if (this.hasDialog === true) {
            this.dialog = true
          else {
          if (this.$listeners.filter !== void 0) {
          else if (this.noOptions !== true || this.$scopedSlots['no-option'] !== void 0) {
   = true

    The problem is that when it is called from __onTargetKeydown the e(vent) is not being passed to:

          if ( === true) {
          else if (this.innerLoading !== true) {
            this.showPopup()  //<=== e is not propagated HERE

    So, although I can intercept it, I can not know witch key was pressed 'cause I dont have the event.

    Any help?


Log in to reply