---
lang: ja-jp
breaks: true
---
# FluentNumberField を InteractiveServer モードで使用して、上／下キーを押しっぱなしにすると、値が無限に更新されて制御不能となる 2024-01-18


:::info
上／下キーをゆっくり操作すれば発生しない。
:::

:::info
WebAssemblyでクライアント側で処理すると発生しない。公式のデモサイトはWebAssemblyなので当然正常に動作している。

> Number field
> https://preview.fluentui-blazor.net/NumberField
> 
:::

:::warning
公式のデモアプリをビルドして、サーバ側でレンダリングで実行すると同様に本現象が発生する。
:::

:::info
ちなみに、開発トンネルを使用して値の増減ボタンを連打しても発生する。。仕組み的にどうしようもないのか？？？
:::

## プロジェクトテンプレート


## csproj

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
	<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.*-* " />
    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.*-* " />
  </ItemGroup>
</Project>

## Home.razor

@page "/"

@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<p>
    <FluentNumberField @bind-Value="ExampleInt" Label="Integer" />
    <br />
    Example int: @ExampleInt
</p>

@code {
    int ExampleInt { get; set; } = 123;
}

## MatBlazorの`MatNumericUpDownField` は `InteractiveServer` で実行しても正常に動作している

> MatNumericUpDownField
> https://www.matblazor.com/NumericUpDownField


:::warning
正常に動作しているが、開発トンネルを使用して遅延のあるネットワークでは値の更新に多少の遅延が発生する。
※イベントの発生と値の更新を同期的に行っているような印象。
※実用に耐えないほどの遅延ではない。
:::

## 過去のIssueを発見

> fix: FluentNumericField is not stopping update its value on up/down arrow clicks. #620
> https://github.com/microsoft/fluentui-blazor/issues/620


私は再現できませんでしたでクローズされている。。。

## 関係ありそうなプルリクが上がっている。

> Not setting current-value for fluent-switch and fluent-number-field #1424
> https://github.com/microsoft/fluentui-blazor/pull/1424
> 

### mainブランチにマージされた模様


## 治った


## パッケージのリリースも行われている。

https://github.com/microsoft/fluentui-blazor/releases/tag/v4.4.0

###### tags: `Fluent UI Blazor` `Blazor` `Fluent` `InteractiveServer` `FluentNumberField`