diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index ea859fd4999..be83d602daa 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.11.1-beta05</Version>
+    <Version>9.11.1-beta06</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js
index 13d7cfa3603..b4977704f59 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js
@@ -1,4 +1,5 @@
 import Data from "../../modules/data.js"
+import EventHandler from "../../modules/event-handler.js"
 import Popover from "../../modules/base-popover.js"
 
 export function init(id, invoke, options) {
@@ -18,11 +19,27 @@ export function init(id, invoke, options) {
             }
         }
     });
+    const input = el.querySelector('.datetime-picker-input');
     const dateTimePicker = {
-        el,
+        input,
         popover
     }
-    Data.set(id, dateTimePicker)
+    Data.set(id, dateTimePicker);
+
+    EventHandler.on(input, 'keydown', e => {
+        if (e.key === 'Tab' && popover.isShown()) {
+            popover.hide();
+        }
+    });
+    EventHandler.on(input, 'keyup', e => {
+        if (e.key === 'Escape') {
+            popover.hide();
+            input.blur();
+        }
+        else if (e.key === 'Tab') {
+            popover.show();
+        }
+    });
 }
 
 export function hide(id) {
@@ -37,6 +54,9 @@ export function dispose(id) {
     Data.remove(id)
 
     if (data) {
-        Popover.dispose(data.popover)
+        const { input, popover } = data;
+        EventHandler.off(input, 'keydown');
+        EventHandler.off(input, 'keyup');
+        Popover.dispose(popover)
     }
 }