Description
Added keydown event listener to backdrop
.
Updated static offcanvas
to close on esc
when data-bs-keyboard = true
, which is also the current default setting for this attribute.
If data-bs-keyboard = false
the offcanvas
will not close on any esc
press.
Motivation & Context
This is a bug fix and provides offcanvas
with similar behavior on esc
keydown to modal
, esc
pressed on either static offcanvas
or its backdrop
will close it.
Type of changes
-
Bug fix (non-breaking change which fixes an issue) -
New feature (non-breaking change which adds functionality) -
Refactoring (non-breaking change) -
Breaking change (fix or feature that would change existing functionality)
Checklist
-
I have read the contributing guidelines -
My code follows the code style of the project (using npm run lint
) -
My change introduces changes to the documentation -
I have updated the documentation accordingly -
I have added tests to cover my changes -
All new and existing tests passed
Live previews
Change can be verified using this code snippet (showcases all scenarios):
<!--Static offcanvs with data-bs-keyboard=true closes on esc-->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop"
aria-controls="staticBackdrop">
static offcanvas closes on esc
</button>
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1"
id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me, but will close on esc
</div>
</div>
</div>
<!--Static offcanvs with data-bs-keyboard=false attribute dosen't close on esc-->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-keyboard="false"
data-bs-target="#staticBackdropNoKeyboard" aria-controls="staticBackdrop">
static offcanvas closes on esc
</button>
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdropNoKeyboard"
aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>I will not close if you click on press esc outside of me.</div>
</div>
</div>
<!--Non-static offcanvs behavior not changed-->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#nonStaticBackdrop"
aria-controls="staticBackdrop">
non-static offcanvas
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="nonStaticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>I will close if you click outside of me.</div>
</div>
</div>
Related issues
Closes #37155