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

A new List choice typed after "Add to list" is thrown away unless you press Enter

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

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

@richshaw がすでに取り組んでいます。

2026年10月27日 から。

  • #692 @richshaw による — オープン

評価

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

調査の方向性

Read src/components/build-wysiwyg/EnumPicker.tsx and its useOutsideClose behavior, then inspect EnumPicker.test.tsx and the SlotEditor and WysiwygGroup call sites. Reproduce the outside-click and unmount-blur sequence first. Done means outside clicks save once, Escape cancels, and Enter, Tab, and the Add button save once; verify Duplicate uses the new slot value and group heading renaming still works.

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

説明

bug pipeline:building pipeline:ux

Needs your OK: this changes what happens when an organizer types a new choice into a List field and clicks away. Swap pipeline:proposed for pipeline:ready to have it built.

What happens

On the Build tab, a List field's picker has "+ Add to list". Choosing it shows a small box ("New item name"). What you type is added only if you then press Enter, or Tab out of the box. A click anywhere else throws the text away. That includes another field, Duplicate, Done, or the page. Nothing on screen says Enter is needed, and nothing says the text was dropped. The slot keeps its old value (or sits under the empty group heading), and the list keeps its old choices.

The picker is EnumPicker (src/components/build-wysiwyg/EnumPicker.tsx). SlotEditor uses it for a slot's value, and WysiwygGroup for a group's heading. A mousedown outside runs useOutsideClose → close(), which sets settledRef. The box's onBlur → commitNew then returns early. Tab works only because the hook isn't given { focus: true }, so a blur without a click still reaches commitNew.

In the walkthrough, a new organizer followed a step that said "choose Add to list and type Main", then chose Duplicate as the next step said. The choice was lost twice before they tried Enter. Every list in a signup built that way starts with this step.

Fix, in outline

  • A click outside adds the text, the way Tab already does: if the box holds anything but spaces, add it to the list and pick it for this slot, then close.
  • Escape stays the one way to cancel.
  • Show an "Add" button beside the box, so a mouse user can see how to finish without knowing about Enter.
  • Keep the settledRef guard, so Enter (or the Add button) followed by the unmount blur still adds once.

Watch for

  • The discard is deliberate today. close()'s comment says a blur after Escape or a click outside must not add the draft. Only the click-outside half changes. Escape keeps cancelling.
  • Tests that must keep passing: EnumPicker.test.tsx has "Escape inside the add-input cancels without saving", "does not double-add when Enter is followed by an unmount blur" and "does not add when Escape is followed by an unmount blur". Leave them as they are.
  • A click that also does something. The click that commits may be on Duplicate or Done. commitNew awaits onAddOption (the field's choices PATCH) before onChange (the cell value). Check that a Duplicate pressed straight after typing copies the new value, not the old one, or say in the PR why it can't race.
  • The group heading's picker (WysiwygGroup) is the same component, so it changes too. Check renaming a group heading still behaves.
  • Help: no article mentions Add to list today. Run the help-pages skill's affected-articles.mjs anyway, in case one shows the picker in a screenshot.

Choices this makes

  • A click outside adds rather than discards. Every other builder control saves as you go, so typed text vanishing is the surprise. The alternative is to keep the discard and only show "Press Enter to add".
  • An "Add" button, labelled "Add". A visible way to finish beats a hint line. A hint alone would still lose text for anyone who misses it.

Done when

  • Typing a new choice and then clicking another field, Duplicate or Done adds the choice to the list and sets it on the slot.
  • Escape still cancels with nothing added. Enter, Tab and the Add button each add it once.
  • Unit tests in EnumPicker.test.tsx pin the click-outside add (a mousedown outside, then the unmount blur, adds once) and the Add button.
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass, and the help walkthroughs (pnpm test:e2e tests/e2e/help) still pass.

Found by the UX walkthrough, scenario V2 (following a page's set-up steps word for word), on opensignup-prod main merged with upstream 1d4ff3a. Checked by reading EnumPicker and useOutsideClose against the tester's two lost choices. https://claude.ai/code/session_01ATJ4moQv7TF11SrH9fDe2q

主要言語
TypeScript
スター
19
フォーク
4
平均マージ
21時間 3分
マージ済み PR（30日）
176

環境構築

はじめの一歩

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

richshaw/OpenSignup のほかの issue

richshaw/OpenSignup の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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