feat(DateTimePicker): support Tab/Esc keyboard event (#6848)

* fix(DatetimePicker): support tab/esc keyboard

* chore: bump version 9.11.1-beta06

Author: ArgoZhang

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>

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)
     }
 }