Skip to content

リスト列で先頭の選択肢を選べるようにする - #18

Merged
RyoSogawa merged 3 commits into
mainfrom
fix/list-editor-unmatched-value
Sep 5, 2026
Merged

RyoSogawa merged 3 commits into
mainfrom
fix/list-editor-unmatched-value

Conversation

@kanchi-Matsumoto

@kanchi-Matsumoto kanchi-Matsumoto commented Aug 25, 2026 •

Copy link
Copy Markdown
Contributor

このPRでできること

list 列のセルで、値が選択肢に含まれていない状態から、先頭の選択肢を選んで確定できるようになります。

あわせて、設定済みのセルを未選択に戻す操作もできるようになります。

不具合の内容

<select> は value に一致する <option> が無いと、ブラウザが先頭の option を表示します。

ListEditor は options に渡された選択肢だけを描いていたため、値が選択肢に含まれないセル(未選択の空文字が典型)は、編集を開始した時点で先頭の項目が表示された状態になっていました。

<select value="">
  <option value="a">選択肢A</option>   <!-- 値は "" なのにこれが表示される -->
  <option value="b">選択肢B</option>
</select>

利用者にはその項目が選ばれて見えるため、同じ項目をクリックしても値が変わりません。change が発火せず onChange / onCommit が呼ばれないので、編集を確定できませんでした。

選択肢が1つしかない列では、そのセルを埋める手段が無い状態でした。

変更内容

  • 未選択を表す空の <option value="" /> を常に先頭に描画するようにした(レビューでの提案を採用)
  • 設定済みのセルでも空の option を残し、選択の解除を同じ操作で行えるようにした
  • 上記を固定する ListEditor のテストを追加
  • デモの E2E テストを、先頭に空の option が並ぶ前提に更新

options に渡した選択肢の描画順は変わりません。

確認

  • pnpm typecheck
  • pnpm lint
  • pnpm test
  • pnpm test:e2e
  • pnpm build
  • 修正を外すと追加したテストが落ちることを確認

https://claude.ai/code/session_01BjT1GQVAGKdmwChHtSknqz

A select whose value matches none of its options falls back to showing
the first one. The list editor rendered only the options it was given,
so a cell holding a value outside that set, an empty cell being the
common case, opened with the first option already displayed.

The operator sees that option as chosen. Picking it changes nothing, so
no change event fires, onChange and onCommit never run and the edit
cannot be committed. With a single option available the cell becomes
impossible to fill at all.

Render an option carrying the current value when no supplied option
matches it, so an empty cell opens empty and choosing any option is a
real change.

Claude-Session: https://claude.ai/code/session_01X6kUeNeUyb33xQQ8VAZw15
@kanchi-Matsumoto
kanchi-Matsumoto marked this pull request as ready for review August 25, 2026 06:18
Comment thread packages/core/src/components/editors/ListEditor.tsx Outdated
@RyoSogawa

Copy link
Copy Markdown
Member

@kanchi-Matsumoto
CIが落ちているみたいなので修正をお願いします!
あと、descも現在の内容に併せて更新いただけますと! 🙏🏽

The list editor now always renders an empty option ahead of the
configured ones, so the select in the demo shows five options instead
of four. Update the count and assert that the first option is the
empty one.
@kanchi-Matsumoto

Copy link
Copy Markdown
Contributor Author

@RyoSogawa
レビューありがとうございます!CI落ちてたのとPRのdesc修正しました!
3c44029

@RyoSogawa RyoSogawa left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@RyoSogawa
RyoSogawa merged commit 2572226 into main Sep 5, 2026
5 checks passed
@RyoSogawa
RyoSogawa deleted the fix/list-editor-unmatched-value branch September 5, 2026 12:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants