Fluent UI Blazor の FluentTextField が使い物にならないので使うのを諦めたときの対処方法

Fluent UI Blazor の見た目は好きなのですが FluentTextField などで対応されないこの問題があるので非常に使いにくいです。

https://github.com/microsoft/fluentui-blazor/issues/2553

先日マルチエージェントのサンプルのフロントエンドを Fluent UI Blazor で作っていたのですが FluentTextField の動きがおかしいので使うのを諦めました。
Issue には await Task.Delay(4); みたいな事をしろとあるのですが、これをやるのは嫌なので普通の InputText を使うことにしました。

InputText を置くだけだと見た目が浮いてしまうので以下のような css を定義しておきました。

.textfield {
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: var(--font-weight);
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-layer-rest);
}

このクラスを適用すると以下のような見た目になります。まぁ浮いた感じではないので許容範囲かな…。

まとめ

次のメジャーバージョンは v5 らしいので、そこではこういう致命的（個人の感想です）な問題が解消されるといいなぁと思っています。