Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

NumberInput: Form.Item rules do not run while typing because onChange fires only on blur/Enter

オープン
  • 何か問題がありますか？
#74 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
45/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
frontend, testing

調査の方向性

Start with the NumberInput re-export from @astryxdesign/core and Form.Item's validation trigger in src/components/Form/Field.tsx:469. Trace how draft input reaches Form.Item and compare it with TextInput's change behavior; the issue describes the relevant input and commit handlers in the upstream NumberInput source. Done means rules can validate the typed draft while standalone commit-on-blur behavior remains intact.

索引モデルが issue の本文から書いたものです。

説明

Problem

A Form.Item rule on a NumberInput does not run while the user types. The error appears only after the field loses focus or the user presses Enter.

<Form.Item name="size" rules={[{ type: "number", max: 100 }]}>
  <NumberInput label="Size" />
</Form.Item>

Typing 150 shows no error until blur. TextInput and the other controls validate on every keystroke, so NumberInput fields behave differently from the rest of the form.

Cause

NumberInput is re-exported as is from @astryxdesign/core (0.7.0, src/astryx/NumberInput.ts). It keeps the text as a draft (pendingInput) while the user edits it, and calls onChange only at a commit boundary:

  • handleInputChange only calls setPendingInput(e.target.value).
  • commitPendingInput calls onChange on blur or Enter, and only when the whole draft parses and is within min/max.

Form.Item validates on trigger="onChange" by default (src/components/Form/Field.tsx:469), so the field never sees a value during typing. The component exposes no per-keystroke callback (onFocus, onBlur, onEnter and onKeyDown only), so validateTrigger can't be pointed at another event either.

Because an invalid or out-of-range draft is never committed, a rule like max: 100 can't fire on that value at all. The input reverts or clamps on blur instead of showing the rule's message.

Expected

Inside a Form.Item, a NumberInput reports its value as the user types, so rules run on each keystroke like the other controls. Its standalone commit-on-blur behavior should stay as it is.

Possible directions

  • Wrap or fork NumberInput in ui-common so it emits the parsed draft (or null when it does not parse) on each input change, and keep the commit/clamp on blur.
  • Ask Astryx upstream for a live callback (e.g. onInputChange(value, text)) or a commitMode="change" option, then map it to Form.Item's trigger.
  • At minimum, document that NumberInput rules run on blur, and use validateTrigger="onBlur" explicitly.

Related: #69 (Form.Item owning label/extra/messages for every control).

主要言語
TypeScript
スター
2
フォーク
0
平均マージ
1日 16時間
マージ済み PR（30日）
34

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

lablup/ui-common のほかの issue

lablup/ui-common の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。