data-keyboard="false" doesn't work in bootstrap for the following code

Question

I dont want the esc key to toggle my dropdown. so I added the data-keyboard="false". But that doesn't seem to work and my code still toggles on esc key.

code: https://jsfiddle.net/4dkfj63v/21/

<div class="dropdown">
    <button class="btn dropdown-toggle" 
            type="button" 
            id="dropdownMenu1" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            data-keyboard="false"
            aria-expanded="true">
       Options 
       <span class="caret"></span> 
    </button>
    <ul class="dropdown-menu" id="myDrop" aria-labelledby="dropdownMenu1" data-keyboard="false" >
      <li>
        Option 1
      </li>
      <li>
        Option 2
      </li>
      <li>
        Option 3
      </li>

    </ul>
</div>

tao · Accepted Answer · 2023-02-22T21:12:31.687

0

This should do it:

$('.dropdown').on('keydown', '.dropdown-toggle', ({ key }) => key !== 'Escape')

See it working.

Note: you tagged your question bootstrap-4 and bootstrap-5 but in your fiddle you're using Bootstrap 3. Which version are you actually using? The above method works on both v3.* and v4.*, as long as you're loading jQuery.
Haven't tested it on v5.*

edited Feb 22 '23 at 21:12

answered Feb 22 '23 at 21:06

tao

82,996
16
114
150

I have updated my tags (Thanks for the input), I am using bootstrap v3 and your solution seems to be working. Thank you for the help. – Deekshith Shetty Feb 24 '23 at 17:09
Is it possible to make it work without using javascript, adding something to the html – Deekshith Shetty Feb 27 '23 at 12:59
@deeks, no, not in `v3`. The reason why it works *"without using javascript"* in later versions is not because it's not using javascript *per-se*, but because ***the javascript is already there***. It checks for those attributes and, if set, it returns `false` in the bound event. In `v3` that code is not present, so we need to do it ourselves. – tao Feb 27 '23 at 13:06

A. Meshu · Answer 2 · 2023-02-22T21:19:29.933

For bootstrap5:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>



<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        TRY CLICK ON ESC
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Seems that you need to set this attribute to the modal itself as mentioned here (not to the button as you did).

And it's not data-keyboard="false" BUT data-bs-keyboard="false".

Check the link i provided - its from bootstrap docs.

I suggest you test your answer on the provided jsfiddle. Doesn't seem to work as advertised. — tao, Feb 22 '23 at 21:13
Your answer works for v5. Question is not about v5. The fiddle is done using v3. I suspect OP is using v4 (particularly since they're using jQuery, which is no longer shipped with v5). By *"you welcome"*, did you actually mean *"thank you"*? — tao, Feb 22 '23 at 21:19
Yeah i notice your note after i wrote my answer and comment. If it's for v3 i think this is duplicate... https://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing — A. Meshu, Feb 22 '23 at 21:22
The bootstrap version I am using is v3, sorry for the blunder. I have seen the stackoverflow question provided by Meshu, but that doesn't seem to work for my code. I have found the answer for the issue and marked it. Thank you!. — Deekshith Shetty, Feb 24 '23 at 17:12

data-keyboard="false" doesn't work in bootstrap for the following code

2 Answers2