Skip to content

Commit 59665e9

Browse files
MarvinKlein1508MarvinKlein1508
authored
[DatePicker & TimePicker] Fix FocusAsync throwing null exception (#4167)
* Fix FocusAsync for TimePicker * Fix FocusAsync for FluentDatePicker
1 parent fcb3106 commit 59665e9

5 files changed

Lines changed: 57 additions & 40 deletions

File tree

‎examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3050,6 +3050,11 @@
30503050
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.PopupId">
30513051
<summary />
30523052
</member>
3053+
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.TextField">
3054+
<summary>
3055+
Holds the reference to the internal <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentTextField"/> component.
3056+
</summary>
3057+
</member>
30533058
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.Appearance">
30543059
<summary>
30553060
Gets or sets the design of this input.

‎src/Core/Components/Base/FluentInputBase.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ public override Task SetParametersAsync(ParameterView parameters)
352352
/// Exposes the elements FocusAsync() method.
353353
/// </summary>
354354
[SuppressMessage("Style", "VSTHRD200:Use `Async` suffix for async methods", Justification = "#vNext: To update in the next version")]
355-
public async void FocusAsync()
355+
public virtual async void FocusAsync()
356356
{
357357
await Element!.FocusAsync();
358358
}

‎src/Core/Components/DateTime/FluentDatePicker.razor‎

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,47 @@
22
@inherits FluentCalendarBase
33

44
<FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@AriaLabel" ChildContent="@LabelTemplate" Required="@Required" />
5-
<FluentTextField Id="@Id"
6-
Embedded="true"
7-
Class="@ClassValue"
8-
Style="@StyleValue"
9-
AutoComplete="off"
10-
Autofocus="@Autofocus"
11-
Appearance="@Appearance"
12-
@bind-Value="@CurrentValueAsString"
13-
@onclick="@OnCalendarOpenHandlerAsync"
14-
@ondblclick="@OnDoubleClickHandlerAsync"
15-
@onkeydown="(e => KeyDown.SimulateClickAsync(e, OnCalendarOpenHandlerAsync))"
16-
ReadOnly="@ReadOnly"
17-
Disabled="@Disabled"
18-
Required="@Required"
19-
Placeholder="@(Placeholder ?? PlaceholderAccordingToView())"
20-
Name="@Name"
21-
@attributes="@AdditionalAttributes">
22-
@((MarkupString)CalendarIcon)
5+
<FluentTextField @ref="TextField"
6+
Id="@Id"
7+
Embedded="true"
8+
Class="@ClassValue"
9+
Style="@StyleValue"
10+
AutoComplete="off"
11+
Autofocus="@Autofocus"
12+
Appearance="@Appearance"
13+
@bind-Value="@CurrentValueAsString"
14+
@onclick="@OnCalendarOpenHandlerAsync"
15+
@ondblclick="@OnDoubleClickHandlerAsync"
16+
@onkeydown="(e => KeyDown.SimulateClickAsync(e, OnCalendarOpenHandlerAsync))"
17+
ReadOnly="@ReadOnly"
18+
Disabled="@Disabled"
19+
Required="@Required"
20+
Placeholder="@(Placeholder ?? PlaceholderAccordingToView())"
21+
Name="@Name"
22+
@attributes="@AdditionalAttributes">
23+
@((MarkupString)CalendarIcon)
2324
</FluentTextField>
2425

2526
@if (Opened)
2627
{
27-
<FluentOverlay @bind-Visible="@Opened" Dismissable="true" FullScreen="true" Interactive="true" InteractiveExceptId="@PopupId" />
28-
<FluentAnchoredRegion Anchor="@Id"
29-
Id="@PopupId"
30-
HorizontalDefaultPosition="@(PopupHorizontalPosition ?? (System.Globalization.CultureInfo.CurrentUICulture.TextInfo.IsRightToLeft ? HorizontalPosition.Left : HorizontalPosition.Right))"
31-
HorizontalInset="true"
32-
VerticalDefaultPosition="@VerticalPosition.Unset"
33-
Shadow="ElevationShadow.Flyout"
34-
Class="fluent-datepicker-popup"
35-
Style="@($"z-index: {ZIndex.DatePickerPopup}; border-radius: calc(var(--control-corner-radius) * 1px); padding: 12px;")">
36-
<FluentCalendar Culture="@Culture"
37-
View="@View"
38-
DayFormat="@DayFormat"
39-
DisabledDateFunc="@DisabledDateFunc"
40-
DisabledCheckAllDaysOfMonthYear="@DisabledCheckAllDaysOfMonthYear"
41-
DisabledSelectable="@DisabledSelectable"
42-
Value="@Value"
43-
ValueChanged="@OnSelectedDateAsync"
44-
DaysTemplate="@DaysTemplate"
45-
PickerMonthChanged="@PickerMonthChanged" />
46-
</FluentAnchoredRegion>
28+
<FluentOverlay @bind-Visible="@Opened" Dismissable="true" FullScreen="true" Interactive="true" InteractiveExceptId="@PopupId" />
29+
<FluentAnchoredRegion Anchor="@Id"
30+
Id="@PopupId"
31+
HorizontalDefaultPosition="@(PopupHorizontalPosition ?? (System.Globalization.CultureInfo.CurrentUICulture.TextInfo.IsRightToLeft ? HorizontalPosition.Left : HorizontalPosition.Right))"
32+
HorizontalInset="true"
33+
VerticalDefaultPosition="@VerticalPosition.Unset"
34+
Shadow="ElevationShadow.Flyout"
35+
Class="fluent-datepicker-popup"
36+
Style="@($"z-index: {ZIndex.DatePickerPopup}; border-radius: calc(var(--control-corner-radius) * 1px); padding: 12px;")">
37+
<FluentCalendar Culture="@Culture"
38+
View="@View"
39+
DayFormat="@DayFormat"
40+
DisabledDateFunc="@DisabledDateFunc"
41+
DisabledCheckAllDaysOfMonthYear="@DisabledCheckAllDaysOfMonthYear"
42+
DisabledSelectable="@DisabledSelectable"
43+
Value="@Value"
44+
ValueChanged="@OnSelectedDateAsync"
45+
DaysTemplate="@DaysTemplate"
46+
PickerMonthChanged="@PickerMonthChanged" />
47+
</FluentAnchoredRegion>
4748
}

‎src/Core/Components/DateTime/FluentDatePicker.razor.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ protected override string? ClassValue
3333
/// <summary />
3434
private string PopupId => $"{Id}-popup";
3535

36+
/// <summary>
37+
/// Holds the reference to the internal <see cref="FluentTextField"/> component.
38+
/// </summary>
39+
private FluentTextField TextField { get; set; } = default!;
40+
3641
/// <summary>
3742
/// Gets or sets the design of this input.
3843
/// </summary>
@@ -153,4 +158,9 @@ private string PlaceholderAccordingToView()
153158
CalendarViews.Months => Culture.DateTimeFormat.YearMonthPattern,
154159
_ => Culture.DateTimeFormat.ShortDatePattern
155160
};
161+
162+
public override void FocusAsync()
163+
{
164+
TextField?.FocusAsync();
165+
}
156166
}

‎src/Core/Components/DateTime/FluentTimePicker.razor‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
@namespace Microsoft.FluentUI.AspNetCore.Components
22
@inherits FluentInputBase<DateTime?>
33
<FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@AriaLabel" ChildContent="@LabelTemplate" Required="@Required" />
4-
<fluent-text-field class="@($"{ClassValue} fluent-timepicker")"
4+
<fluent-text-field @ref="Element"
5+
class="@($"{ClassValue} fluent-timepicker")"
56
style="@StyleValue"
67
id="@Id"
78
autofocus="@Autofocus"

0 commit comments

Comments
 (0)