---
# System prepended metadata

title: FluentNumberField を InteractiveServer モードで使用して、上／下キーを押しっぱなしにすると、値が無限に更新されて制御不能となる 2024-01-18
tags: [FluentNumberField, Fluent UI Blazor, Fluent, InteractiveServer, Blazor]

---

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

![1_2024-01-18_17-49-38](https://hackmd.io/_uploads/Sk3XqwUK6.gif)

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

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

> Number field
> https://preview.fluentui-blazor.net/NumberField
> ![image](https://hackmd.io/_uploads/B1oL8BvYp.png)
:::

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

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

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

![image](https://hackmd.io/_uploads/BkQMBwUFp.png)


## csproj

```xml=
<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

```htmlembedded=
@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

![image](https://hackmd.io/_uploads/H1IPwWz56.png)

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

## 過去のIssueを発見

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

![image](https://hackmd.io/_uploads/rkVj7Mf9a.png)

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

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

> Not setting current-value for fluent-switch and fluent-number-field #1424
> https://github.com/microsoft/fluentui-blazor/pull/1424
> ![image](https://hackmd.io/_uploads/H11iB4qq6.png)

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

![image](https://hackmd.io/_uploads/SJSRpEj9T.png)

## 治った

![1_2024-02-03_13-55-08](https://hackmd.io/_uploads/By_rFHjqa.gif)

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

https://github.com/microsoft/fluentui-blazor/releases/tag/v4.4.0
![image](https://hackmd.io/_uploads/HkliJCWC5T.png)

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