CustomModalにonShowコールバックを追加しiOSフォーカス遅延のマジックナンバーを除去

[TinyKitten]

Summary

• CustomModal に onShow コールバック prop を追加（開くアニメーション完了時に発火）
• SavePresetNameModal の setTimeout(() => focus(), 180) を削除し、onShow 経由でフォーカスするよう変更
• onShow / onCloseAnimationEnd を ref パターンに変更し、親の再レンダーによる不要なエフェクト再実行を防止

Test plan

• iPhone（またはiOSシミュレータ）でプリセット保存モーダルを開き、アニメーション完了後にフォーカスが当たることを確認
• モーダル表示直後にキーボードが表示され、コンテンツが画面内に収まることを確認
• Android でも autoFocus による従来のフォーカス動作が維持されていることを確認

🤖 Generated with Claude Code

[coderabbitai]

📝 Walkthrough

Walkthrough

モーダル表示後のフォーカス処理を、固定300msタイマーから CustomModal の新しい onShow コールバックへ移行。SavePresetNameModal は表示時に入力へフォーカスする handleShow を追加し、CustomModal の Props に onShow?: () => void を追加した。

Changes

Cohort / File(s)	Summary
SavePresetNameModal の表示フォーカス移行 src/components/SavePresetNameModal.tsx	iOS向けのハードコーディングされた 300ms タイマーと関連クリーンアップを削除。handleShow を追加してテキスト入力にフォーカスし、CustomModal の onShow に接続。
CustomModal に onShow prop を追加 src/components/CustomModal.tsx	Props に onShow?: () => void を追加。表示完了（表示アニメーション終了後）に onShow?.() を呼び出す処理を導入し、コールバックの最新参照を保持するための refs を追加・使用。

Sequence Diagram(s)

sequenceDiagram
    participant SaveModal as SavePresetNameModal
    participant Modal as CustomModal
    participant Input as TextInput
    rect rgba(135,206,235,0.5)
    SaveModal->>Modal: open()
    Modal-->>Modal: run show animation
    Modal->>SaveModal: onShow()  -- after animation completes
    end
    SaveModal->>Input: focus()

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• iOSでプリセット名モーダルがキーボード表示時に画面外に押し出されるバグを修正 #5572: 既存の 300ms フォーカス遅延を扱う PR — SavePresetNameModal の iOS フォーカス処理に直接関連。
• プリセット機能の不具合修正と関連UI改善 #5569: SavePresetNameModal のモーダルライフサイクル周りの修正（ネストされたモーダル回避）で関連性あり。

Poem

🐰 ぴょんと跳ねてモーダル開くよ、
タイマーはもういらないよ、すぐに見るよ、
onShow で目を向けてピンとフォーカス、
キーボードも踊る、待たずに始めよう、
小さな変更で心軽やかに。

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	プルリクエストのタイトルは、CustomModalへのonShowコールバック追加とiOSのフォーカス遅延のマジックナンバー除去という、変更セットの主要な内容を正確に要約している。

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/fix-save-preset-modal-ios-focus-delay

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/components/SavePresetNameModal.tsx (1)

113-117: 180ms は CustomModal 側と共有したいです。

ここで再ハードコードすると、モーダルの duration を次に変えたときにまたズレます。共通定数か「表示完了」コールバック経由にしておくと保守しやすいです。

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/SavePresetNameModal.tsx` around lines 113 - 117, The focus
timing uses a hardcoded 180ms (in the Platform.OS === 'ios' block where
textInputRef.current?.focus() is delayed), which should be synchronized with
CustomModal; remove the magic number and either import and use a shared constant
(e.g., MODAL_ANIMATION_DURATION from CustomModal) or, better, wire an
onShow/onAnimationEnd callback prop on CustomModal and call
textInputRef.current?.focus() from that handler to guarantee focus happens when
the modal animation completes (referencing textInputRef, CustomModal, and the
Platform.OS conditional as needed).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/SavePresetNameModal.tsx`:
- Around line 113-117: The focus timing uses a hardcoded 180ms (in the
Platform.OS === 'ios' block where textInputRef.current?.focus() is delayed),
which should be synchronized with CustomModal; remove the magic number and
either import and use a shared constant (e.g., MODAL_ANIMATION_DURATION from
CustomModal) or, better, wire an onShow/onAnimationEnd callback prop on
CustomModal and call textInputRef.current?.focus() from that handler to
guarantee focus happens when the modal animation completes (referencing
textInputRef, CustomModal, and the Platform.OS conditional as needed).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bba2bfe5-3f8c-4a81-adf7-bff268c0c0f8

📥 Commits

Reviewing files that changed from the base of the PR and between c9c326e and d884333.

📒 Files selected for processing (1)

• src/components/SavePresetNameModal.tsx

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/CustomModal.tsx`:
- Around line 78-82: The effect currently depends on the onShow prop and can
re-run when a new function reference is passed even if visible stays true;
change to store the latest onShow in a ref (e.g., const onShowRef =
useRef(onShow)) and update it in a small useEffect that runs when onShow
changes, then remove onShow from the animation effect's dependency array so it
only depends on visible; inside the animation callback (the start(({ finished })
=> { ... }) block) call onShowRef.current?.() instead of onShow() so the latest
handler is invoked without retriggering the effect when parent passes a new
function reference.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 654e167e-9747-4174-aa84-1cc091a643b4

📥 Commits

Reviewing files that changed from the base of the PR and between d884333 and f535e27.

📒 Files selected for processing (2)

• src/components/CustomModal.tsx
• src/components/SavePresetNameModal.tsx