Users/vnbaaij/several fixes (#1464)

* Fix #1450

* Fix #1448

* Fix demo notification center panel

* Revert editor.config changes

* Fix Tests

Author: vnbaaij

.editorconfig

@@ -270,26 +270,26 @@ dotnet_naming_rule.non_field_members_should_be_pascal_case.style = pascal_case
 
 dotnet_naming_symbols.interface.applicable_kinds = interface
 dotnet_naming_symbols.interface.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
-dotnet_naming_symbols.interface.required_modifiers = 
+dotnet_naming_symbols.interface.required_modifiers =
 
 dotnet_naming_symbols.types.applicable_kinds = class, struct, interface, enum
 dotnet_naming_symbols.types.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
-dotnet_naming_symbols.types.required_modifiers = 
+dotnet_naming_symbols.types.required_modifiers =
 
 dotnet_naming_symbols.non_field_members.applicable_kinds = property, event, method
 dotnet_naming_symbols.non_field_members.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
-dotnet_naming_symbols.non_field_members.required_modifiers = 
+dotnet_naming_symbols.non_field_members.required_modifiers =
 
 # Naming styles
 
-dotnet_naming_style.pascal_case.required_prefix = 
-dotnet_naming_style.pascal_case.required_suffix = 
-dotnet_naming_style.pascal_case.word_separator = 
+dotnet_naming_style.pascal_case.required_prefix =
+dotnet_naming_style.pascal_case.required_suffix =
+dotnet_naming_style.pascal_case.word_separator =
 dotnet_naming_style.pascal_case.capitalization = pascal_case
 
 dotnet_naming_style.begins_with_i.required_prefix = I
-dotnet_naming_style.begins_with_i.required_suffix = 
-dotnet_naming_style.begins_with_i.word_separator = 
+dotnet_naming_style.begins_with_i.required_suffix =
+dotnet_naming_style.begins_with_i.word_separator =
 dotnet_naming_style.begins_with_i.capitalization = pascal_case
 
 # Default severity for analyzer diagnostics with category 'Usage'
@@ -338,4 +338,4 @@ end_of_line = lf
 indent_size = 4
 tab_width = 4
 end_of_line = crlf
-charset = utf-8-bom
+charset = utf-8-bom

examples/Demo/Shared/Components/NotificationCenterPanel.razor

@@ -5,7 +5,6 @@
 
     <FluentStack>
         <FluentSpacer />
-        
         <FluentAnchor Appearance="@Appearance.Hypertext" Href="" OnClick="@(e => MessageService.Clear(App.MESSAGES_NOTIFICATION_CENTER) )">
             Dismiss all
         </FluentAnchor>

src/Core/Components/List/FluentSelect.razor

@@ -1,4 +1,4 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits ListComponentBase<TOption>
 @typeparam TOption
 <CascadingValue Value="_internalListContext" Name="ListContext" TValue="InternalListContext<TOption>" IsFixed="true">
@@ -15,9 +15,8 @@
                    appearance="@Appearance.ToAttributeValue()"
                    current-value="@Value"
                    required="@Required"
-                   
                    @onkeydown="@OnKeydownHandlerAsync"
                    @attributes="AdditionalAttributes">
         @_renderOptions
     </fluent-select>
-</CascadingValue>
+</CascadingValue>

src/Core/Components/List/ListComponentBase.razor.cs

@@ -531,7 +531,10 @@ protected virtual async Task OnKeydownHandlerAsync(KeyboardEventArgs e)
             return;
         }
 
-        var id = await Module!.InvokeAsync<string>("getAriaActiveDescendant", Id);
+        // This delay is needed for WASM to be able to get the updated value of the active descendant.
+        // Without it, the value sometimes lags behind and you then need two keypresses to move to the next/prev option.
+        await Task.Delay(1);
+        string? id = await Module!.InvokeAsync<string>("getAriaActiveDescendant", Id);
 
         FluentOption<TOption> item = _internalListContext.Options.First(i => i.Id == id);
 

src/Core/Components/Slider/FluentSlider.razor

@@ -1,4 +1,4 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentInputBase<TValue>
 @typeparam TValue
 @attribute [CascadingTypeParameter(nameof(TValue))]
@@ -13,7 +13,8 @@
                orientation="@Orientation.ToAttributeValue()"
                mode="@Mode.ToAttributeValue()"
                id="@Id"
-               @bind-value="CurrentValueAsString"
+               @bind-value="@CurrentValueAsString"
+               current-value="@CurrentValueAsString"
                disabled="@Disabled"
                name=@Name
                required=@Required>

src/Core/Components/Toast/FluentToast.razor

@@ -34,7 +34,7 @@
                                       Appearance="Appearance.Hypertext"
                                       @onfocusin="@PauseTimeout"
                                       @onfocusout="@ResumeTimeout"
-                                      @onclick="HandleTopActionClick">
+                                      OnClick="HandleTopActionClick">
                             @_parameters.TopAction
                         </FluentAnchor>
                         break;
@@ -56,7 +56,7 @@
                                   Appearance="Appearance.Hypertext"
                                   @onfocusin="@PauseTimeout"
                                   @onfocusout="@ResumeTimeout"
-                                  @onclick="HandlePrimaryActionClick">
+                                  OnClick="HandlePrimaryActionClick">
                         @_parameters.PrimaryAction
                     </FluentAnchor>
                 }
@@ -68,7 +68,7 @@
                                   Appearance="Appearance.Hypertext"
                                   @onfocusin="@PauseTimeout"
                                   @onfocusout="@ResumeTimeout"
-                                  @onclick="HandleSecondaryActionClick">
+                                  OnClick="HandleSecondaryActionClick">
                         @_parameters.SecondaryAction
                     </FluentAnchor>
                 }

tests/Core/Slider/FluentSliderTests.FluentSlider_Default.verified.razor.html

@@ -1,2 +1,2 @@
 
-<fluent-slider class="horizontal" min="0" max="100" step="10" id="xxx" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="horizontal" min="0" max="100" step="10" id="xxx" current-value="0" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>

tests/Core/Slider/FluentSliderTests.FluentSlider_Double.verified.razor.html

@@ -1,2 +1,2 @@
 
-<fluent-slider class="horizontal" min="-1.5" max="7" step="0.5" id="xxx" value="3.5" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="horizontal" min="-1.5" max="7" step="0.5" id="xxx" current-value="3.5" value="3.5" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>

tests/Core/Slider/FluentSliderTests.FluentSlider_Horizontal.verified.razor.html

@@ -1,2 +1,2 @@
 
-<fluent-slider class="horizontal" min="0" max="100" step="10" orientation="horizontal" id="xxx" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="horizontal" min="0" max="100" step="10" orientation="horizontal" id="xxx" current-value="0" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>

tests/Core/Slider/FluentSliderTests.FluentSlider_Vertical.verified.razor.html

@@ -1,2 +1,2 @@
 
-<fluent-slider class="vertical" min="0" max="100" step="10" orientation="vertical" id="xxx" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>
+<fluent-slider class="vertical" min="0" max="100" step="10" orientation="vertical" id="xxx" current-value="0" value="0" blazor:onchange="1" blazor:elementreference="xxx"></fluent-slider>