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

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>

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.*