[Combobox] Add Combobox Immediate property

examples/Demo/Shared/Pages/List/Combobox/Examples/ComboboxDefault.razor

@@ -1,10 +1,10 @@
 @inject DataSource Data
 
 <h4>Select the best song from the list or type your own</h4>
-<FluentCombobox Placeholder="Make a selection..." Label="Best song" Autofocus="true" Items="@Data.Hits" @bind-Value="@hit" Height="200px" />
 <p>
     Selected hit: @hit
 </p>
+<FluentCombobox Placeholder="Make a selection..." Label="Best song" Autofocus="true" Items="@Data.Hits" @bind-Value="@hit" Height="200px" Immediate ImmediateDelay="100" />
 
 <h4>Pre-selected option</h4>
 <FluentCombobox AriaLabel="Pre-selected option" Items="@Data.Names" @bind-Value="@name" Height="200px" />

src/Core.Assets/src/index.ts

@@ -295,6 +295,7 @@ export function afterStarted(blazor: Blazor, mode: string) {
       }
     }
   });
+
   blazor.registerCustomEventType('splittercollapsed', {
     browserEventName: 'splittercollapsed',
     createEventArgs: event => {
@@ -304,6 +305,15 @@ export function afterStarted(blazor: Blazor, mode: string) {
     }
   });
 
+  blazor.registerCustomEventType('controlinput', {
+    browserEventName: 'input',
+    createEventArgs: event => {
+      return {
+        value: event.target.control.value
+      }
+    }
+  });
+
   blazor.theme = {
     isSystemDark: () => {
       return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -315,7 +325,6 @@ export function afterStarted(blazor: Blazor, mode: string) {
     }
   }
 
-
   if (typeof blazor.addEventListener === 'function' && mode === 'web') {
     customElements.define('fluent-page-script', FluentPageScript);
     blazor.addEventListener('enhancedload', onEnhancedLoad);

src/Core/Components/Base/FluentInputBaseHandlers.cs

@@ -62,6 +62,7 @@ protected virtual async Task InputHandlerAsync(ChangeEventArgs e) // TODO: To up
         {
             return;
         }
+
         if (ImmediateDelay > 0)
         {
             await _debounce.RunAsync(ImmediateDelay, async () => await ChangeHandlerAsync(e));

src/Core/Components/List/FluentCombobox.razor

@@ -21,6 +21,7 @@
                      appearance="@Appearance.ToAttributeValue()"
                      required="@Required"
                      @onchange="@ChangeHandlerAsync"
+                     @oncontrolinput="@InputHandlerAsync"
                      autofocus="@Autofocus"
                      name="@Name"
                      @attributes="AdditionalAttributes">

src/Core/Events/EventHandlers.cs

@@ -21,6 +21,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 [EventHandler("ontooltipdismiss", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onsplitterresized", typeof(SplitterResizedEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onsplittercollapsed", typeof(SplitterCollapsedEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+[EventHandler("oncontrolinput", typeof(ChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 public static class EventHandlers
 {
 }