Railsの動的プルダウンリストで`include_blank: true`を削除した際のJavaScriptの不具合とその解決法

はじめに

Railsアプリケーションで動的なプルダウンリストを扱う際、初期状態を空白にすることがあります。このオプションは一般的にinclude_blank: trueで実装しますが、この記述を削除すると、JavaScriptが正常に作動しなくなり、動的に選択肢を取得することができなくなる場合があります。特に、選択肢が一つしかなくユーザーがそれを変更できない場合、JavaScriptのイベントが発火せず、結果として動的に選択肢を更新できなくなる問題が生じます。この記事では、その問題の原因と解決策を一つのケーススタディとして紹介します。

問題の詳細

例えば、以下のコードは予約システムで使用されるフォームの一部で、ユーザーはスタッフを選択し、その選択に基づいて利用可能な時間帯のプルダウンリストが動的に更新されます。include_blank: trueを使用して、初期選択肢として空白を提供しています。

<%= form_with url: time_tables_path, method: :post, local: true, data: { controller: "staff-selector" } do |form| %>
  <% @reservation_services.each_with_index do |reservation_service, index| %>
    <%= form.label "reservation_services_attributes[#{index}][staff_id]", 'スタッフ選択' %>
    <%= form.collection_select "reservation_services_attributes[#{index}][staff_id]", @working_staffs.select { |staff| staff.services.exists?(id: reservation_service.service_id) }, :id, :name, { include_blank: true }, { id: "staff_select_#{index}", data: { staff_selector_target: "staff", action: "change->staff-selector#updateSlots", slots_target_id: "time_slots_select_#{index}" } } %>
    <!-- その他のフォーム要素 -->
  <% end %>
  <%= form.submit "予定を確認" %>
<% end %>

この設定でフォームを提供すると、ユーザーは初期状態で「何も選択しない」ことができ、それが選択の一部として正当に扱われます。しかし、この状態でフォームを送信した場合、コントローラのアクションで何らかの制御をしないとDB上には空白の文字列として登録しようとしてしまいます。
それが不都合な場合はinclude_blank: trueを削除することが一つの対策です。ただし、プルダウンリストの初期状態に選択肢の一部が強制され、ユーザーが明示的に選択肢を変更しない限り、JavaScriptによる動的な更新がトリガーされません（特に選択肢が一つしかない場合は選択肢を変えてJavaScriptによる動的な更新がトリガーすることができません）。

解決策

この問題に対する解決策は、promptオプションを利用することです。promptオプションを使用すると、選択リストの最初に「選択してください」などのプロンプトが表示され、ユーザーが選択を促されます。これにより、フォームの初期状態で選択肢が一つしかない場合でも、ユーザーがプロンプトを選択してから別の選択肢に変更することでJavaScriptイベントが発火し、期待通りに動的な更新が行われるようになります。

<%= form.collection_select "reservation_services_attributes[#{index}][staff_id]", @working_staffs.select

 { |staff| staff.services.exists?(id: reservation_service.service_id) }, :id, :name, { prompt: '選択してください' }, { id: "staff_select_#{index}", data: { staff_selector_target: "staff", action: "change->staff-selector#updateSlots", slots_target_id: "time_slots_select_#{index}" } } %>

このアプローチにより、ユーザーは明示的に選択を行うことが求められ、JavaScriptのイベントハンドラーが正しく動作するようになります。結果として、include_blank: trueを削除した場合の問題を解決し、動的なプルダウンリストを効果的に管理できるようになります。

まとめ

Railsで動的なプルダウンリストを扱う際にinclude_blank: trueを削除することで生じるJavaScriptの不具合は、promptオプションを適切に使用することで解決可能です。この方法を取り入れることで、ユーザーにより良いフォームの操作性を提供し、動的な内容の更新をスムーズに行えるようになります。