Topic: Modal mbd-btn responding to ENTER key

cawgit free asked 4 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 4 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>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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