fix focus

Author: stsrki

Source/Blazorise/Components/DatePicker/DatePicker.razor.cs

@@ -680,6 +680,11 @@ private async ValueTask OpenCalendarAsync( bool focusCalendar )
         {
             NotifyCalendarStateChanged();
             await InvokeAsync( StateHasChanged );
+
+            if ( focusCalendar )
+            {
+                await JSUtilitiesModule.Focus( default, CalendarGridId, scrollToElement: false );
+            }
         }
 
         await SynchronizeOutsidePointerSubscriptionAsync();
@@ -1715,6 +1720,8 @@ protected override bool IsSameAsInternalValue( TValue value )
 
     internal string CalendarId => $"{ElementId}-calendar";
 
+    internal string CalendarGridId => $"{CalendarId}-grid";
+
     internal string PickerContainerId => $"{ElementId}-container";
 
     internal DatePickerCalendarContext<TValue> CalendarContext

Source/Blazorise/Components/DatePicker/_DatePickerCalendar.razor

@@ -127,7 +127,7 @@
 
         @if ( Parent.InputMode == DateInputMode.Month && Parent.CalendarView == DatePickerCalendarView.Month )
         {
-            <div @ref="@CalendarGridElementRef"
+            <div id="@Parent.CalendarGridId"
                  class="@Calendar.MonthsClassNames"
                  role="grid"
                  aria-label="@Calendar.Label"
@@ -156,7 +156,7 @@
         }
         else if ( Parent.InputMode == DateInputMode.Month )
         {
-            <div @ref="@CalendarGridElementRef"
+            <div id="@Parent.CalendarGridId"
                  class="@Calendar.MonthsClassNames"
                  role="grid"
                  aria-label="@Calendar.Label"
@@ -186,7 +186,7 @@
         }
         else
         {
-            <div @ref="@CalendarGridElementRef"
+            <div id="@Parent.CalendarGridId"
                  class="@Calendar.GridClassNames"
                  role="grid"
                  aria-label="@Calendar.Label"
@@ -324,10 +324,6 @@
 }
 
 @code {
-    private bool focusApplied;
-
-    private ElementReference CalendarGridElementRef;
-
     [CascadingParameter]
     public DatePicker<TValue> Parent { get; set; }
 
@@ -342,26 +338,6 @@
     private void OnCalendarStateChanged()
         => _ = InvokeAsync( StateHasChanged );
 
-    protected override async Task OnAfterRenderAsync( bool firstRender )
-    {
-        if ( Parent.CalendarVisible && !Parent.Inline )
-        {
-            if ( Parent.FocusCalendarOnOpen && !focusApplied )
-            {
-                focusApplied = true;
-                await CalendarGridElementRef.FocusAsync( preventScroll: true );
-            }
-            else if ( !Parent.FocusCalendarOnOpen )
-            {
-                focusApplied = false;
-            }
-        }
-        else
-        {
-            focusApplied = false;
-        }
-    }
-
     public void Dispose()
         => Parent.CalendarStateChanged -= OnCalendarStateChanged;
 }

Source/Blazorise/Components/TimePicker/TimePicker.razor.cs

@@ -487,6 +487,12 @@ private async ValueTask OpenMenuAsync( bool focusMenu )
 
         NotifyMenuStateChanged();
         await InvokeAsync( StateHasChanged );
+
+        if ( focusMenu )
+        {
+            await JSUtilitiesModule.Focus( default, MenuControlsId, scrollToElement: false );
+        }
+
         await SynchronizeOutsidePointerSubscriptionAsync();
     }
 
@@ -1004,6 +1010,8 @@ protected string PickerContainerClassNames
     /// </summary>
     protected internal string MenuId => $"{ElementId}-menu";
 
+    internal string MenuControlsId => $"{MenuId}-controls";
+
     internal string PickerContainerId => $"{ElementId}-container";
 
     internal TimePickerMenuContext<TValue> MenuContext

Source/Blazorise/Components/TimePicker/_TimePickerMenu.razor

@@ -17,7 +17,7 @@
          role="dialog"
          aria-modal="false"
          aria-label="@Menu.TimeText">
-        <div @ref="@MenuControlsElementRef"
+        <div id="@Parent.MenuControlsId"
              class="@Menu.ControlsClassNames"
              role="group"
              aria-label="@Menu.TimeText"
@@ -105,10 +105,6 @@
 }
 
 @code {
-    private bool focusApplied;
-
-    private ElementReference MenuControlsElementRef;
-
     [CascadingParameter]
     public TimePicker<TValue> Parent { get; set; }
 
@@ -123,26 +119,6 @@
     private void OnMenuStateChanged()
         => _ = InvokeAsync( StateHasChanged );
 
-    protected override async Task OnAfterRenderAsync( bool firstRender )
-    {
-        if ( Parent.MenuVisible && !Parent.Inline )
-        {
-            if ( Parent.FocusMenuOnOpen && !focusApplied )
-            {
-                focusApplied = true;
-                await MenuControlsElementRef.FocusAsync( preventScroll: true );
-            }
-            else if ( !Parent.FocusMenuOnOpen )
-            {
-                focusApplied = false;
-            }
-        }
-        else
-        {
-            focusApplied = false;
-        }
-    }
-
     public void Dispose()
         => Parent.MenuStateChanged -= OnMenuStateChanged;
 }