Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#656 0 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@richshaw đang làm issue này rồi.

Từ ngày 27/10/2026.

  • #692 của @richshaw — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
52/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
19
Fork
4
Merge trung bình
21 giờ 3 phút
Pull request đã merge (30 ngày)
176

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của richshaw/OpenSignup

Tất cả issue của richshaw/OpenSignup

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.