Text feels delayed in user modal fields with failing validation
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 28/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 活発
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
Start with the Form Field validation path in src/components/Form/Field.tsx around lines 385-399, where errors are cleared before the new result is published, then check FormItemVisual.tsx:166 and formControl.tsx:218. First reproduce the flicker by typing into a field that fails validation and profile it, since the cause is unconfirmed. Done means a reproduction plus a measured fix that keeps the previous errors until the new validation result arrives.
索引モデルが issue の本文から書いたものです。
説明
Reporter
Seungwon Lee
Original report
Kept in the Teams thread only (see the Teams thread field, org members only); not copied here.
Quill analysis
Typing in the email and password fields of the user creation modal is reported as slow around validation; which text is delayed is not settled. Both fields keep failing while typing, unlike username. On each keystroke the ui-common Form Field clears errors before re-publishing them, so the error row and border toggle. Static analysis found no heavy work and no reproduction was run, so the cause is unconfirmed; password-manager extensions are not ruled out. Proposal: profile in Chrome with and without extensions, then consider keeping previous errors until the new result arrives.
Target repository
The fix belongs here; backend.ai-webui picks it up with the next @lablup/ui-common release.
Classification
bug / good_to_have / confidence 50%
Evidence
react/src/components/UserSettingModal.tsx:681— The form's validateTrigger is onChange and onBlur, so it validates on every keystroke.react/src/components/UserSettingModal.tsx:862— The email field has required and type email rules, so it fails until the address is complete.react/src/components/UserSettingModal.tsx:911— The password pattern requires 8+ characters with a digit, a letter and a symbol, so it keeps failing while typing. The regex itself is not expensive.react/src/components/UserSettingModal.tsx:873— The username field only has max and required, so no error persists after the first character.lablup/ui-common@2768d88:src/components/Form/Field.tsx:399— When validation starts, errors are cleared before the result arrives, then meta is published and the field re-renders. Lines 385-388 publish the result. Identical at the pinned version and main.lablup/ui-common@2768d88:src/components/Form/FormItemVisual.tsx:166— A layout effect runs whenever hasExplain flips and reads the margin through getComputedStyle when the error row returns. The error row is rendered conditionally at line 252.lablup/ui-common@2768d88:src/formControls/formControl.tsx:218— The validating status is neither error nor warning, so it maps to empty and the control's error border is dropped.lablup/ui-common@2768d88:src/components/Form/FormStore.ts:712— Dependent fields re-validate with delayFrame. Once the confirm field is dirty, typing a password leaves its error cleared until after the next frame.
Possible duplicates
none
Reported via Teams (Quill). Created from the Teams thread ("Issue only" chosen by Seungwon Lee). The analysis is AI-generated.
- 主要言語
- TypeScript
- スター
- 2
- フォーク
- 0
- 平均マージ
- 1日 1時間
- マージ済み PR（30日）
- 36
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
lablup/ui-common のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
Tab: render endContent beside the tab button, not inside it対応中かも @ironAiken2 が 3 日前に担当しました。 オープン
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
メンテナーはふだん 1 日以内に返信
lablup/ui-common の issue をすべて見る
似ている issue
-
code-quality good-first-issue
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
OpenRailAssociation/netzgrafik-editor-frontend#1481 ·
メンテナーはふだん 1 日以内に返信
-
bug implicit-state
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
-
area:models enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
メンテナーはふだん 1 日以内に返信
-
bug frontend ui
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
メンテナーはふだん 1 日以内に返信
-
Recording drops clicks on links, filters and checkboxes that share a form with a search field対応中かも @columbia11 が今日担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
Tencent/BrowserSkill#657 ·
メンテナーはふだん 1 日以内に返信