Topic: Modal mbd-btn responding to ENTER key
                  
                  cawgit
                  free
                  asked 6 years ago
                
Expected behavior Unsing mdb-modal with an mdb-btn inside of it. How do I capture the ENTER button keypress.
Actual behavior No Reaction
Resources (screenshots, code snippets etc.)
<mdb-btn class="rounded" color="primary" small @click="authenticateUser" v-on:keyup.enter="authenticateUser">Login</mdb-btn>
                      
                      Magdalena Dembna
                      staff
                        answered 6 years ago
                    
Adding @keyup.enter will register events happening specifically on this button - if you tab through page and press enter while focus is on the button, the modal will close. I understand it's not the effect you want to achieve, so solution is a bit more complicated - you need to add event listener to the document:
<mdb-btn color="primary" @click.native="toggleModal">Launch demo modal</mdb-btn>
      <mdb-modal :show="toggle" @close="toggle = false">
        <mdb-modal-header>
          <mdb-modal-title>Modal title</mdb-modal-title>
        </mdb-modal-header>
        <mdb-modal-body>...</mdb-modal-body>
        <mdb-modal-footer>
          <mdb-btn color="secondary" @click.native="toggleModal">Close</mdb-btn>
        </mdb-modal-footer>
      </mdb-modal>
    </mdb-container> 
  </mdb-container>
</template>
<script>
import { mdbBtn, mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter } from 'mdbvue';
export default {
  name: 'ModalPage',
  data() {
    return {
      toggle: false
    };
  },
  components: {
    mdbBtn,
    mdbModal,
    mdbModalHeader,
    mdbModalTitle,
    mdbModalBody,
    mdbModalFooter
  },
  methods: {
    closeModal(e) {
      if (e.keyCode === 13) {
        this.toggle = false;
      }
    },
    toggleModal() {
      this.toggle = !this.toggle;
      if (this.toggle) {
        document.addEventListener('keyup', this.closeModal);
      } else {
        document.removeEventListener('keyup', this.closeModal);
      }
    }
  }
};
</script>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.6.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No