⚡ v0.16.1 — Turbo Frame Autocomplete, Bug Fixes & Migration Guide

What's New

AutocompleteOptionComponent

A new ViewComponent for rendering option rows inside turbo-frame autocomplete responses. Provides label and support content slots so you can embed avatars, icons, or arbitrary markup in each row — going beyond the plain text that JSON mode supports.

<%= midwest_autocomplete_option(value: user.id) do |opt| %>
  <% opt.with_label do %>
    <%= midwest_avatar(name: user.name, size: :sm) %>
    <span><%= user.name %></span>
  <% end %>
  <% opt.with_support { user.email } %>
<% end %>

Midwest::AutocompleteFrame concern

A second server-side concern for autocomplete that returns a <turbo-frame> of server-rendered HTML instead of a JSON array. Include it in any controller with the autocomplete_frame macro and pass turbo_frame_url: to AutocompleteComponent to activate this mode. Full Rails rendering means any component, partial, or helper can appear in the dropdown list.

class UsersController < ApplicationController
  include Midwest::AutocompleteFrame
  autocomplete_frame :user, key: :name, value: :id, support: :email
end

# config/routes.rb
concern :midwest_autocomplete_frame, Midwest::Routing::AUTOCOMPLETE_FRAME
resources :users, concerns: :midwest_autocomplete_frame

<%= midwest_form_autocomplete(
  name: :user_id,
  label: "Assigned to",
  turbo_frame_url: midwest_autocomplete_frame_users_path
) %>

MIGRATE_FROM_WEBCOMPONENTS.md

A new migration reference (MIGRATE_FROM_WEBCOMPONENTS.md at the repo root) covering every @midwest-design web component and its ViewComponent equivalent, with side-by-side attribute/kwarg comparisons. Aimed at teams porting an existing app from the web component library to this gem.

What Changed

Form::AutocompleteComponent — turbo_frame_url: kwarg

New option activating turbo-frame mode. Pass the path returned by midwest_autocomplete_frame_*_path and the Stimulus controller will fetch server-rendered HTML on each keystroke rather than a JSON list.

Form::LiveSummaryComponent — autocomplete integration

LiveSummaryComponent now listens for midwest-autocomplete:change events alongside standard input and change events. Autocomplete fields show their selected badge labels in the summary and update immediately on selection or removal — previously the summary displayed nothing or stale text for autocomplete fields.

Autocomplete Stimulus controller — keyboard navigation fix and refactor

The autocomplete_component_controller received two related fixes:

• Arrow-key bug fixed — arrow key navigation broke after certain interaction sequences because addEventListener and removeEventListener were being called with different function references. The controller now uses arrow-function class properties (onToggle, onFocusOut, onListMouseDown) so each handler has a stable reference across calls.
• Target lifecycle callbacks — wiring that previously lived in connect() moved to Stimulus target callbacks (dropdownTargetConnected, listTargetConnected, turboListTargetConnected). This prevents stale listeners and correctly handles targets that connect after the initial render, such as turbo-frame responses.

What Was Removed

Nothing removed.

Dev Process

Autocomplete Rails features documentation

A new doc page at /rails-features/autocomplete covers all three autocomplete modes (data, async JSON, and turbo-frame) with routing setup, controller configuration, and midwest_autocomplete_option usage examples including custom markup patterns.

Migration guide

MIGRATE_FROM_WEBCOMPONENTS.md at the repo root gives teams a structured reference for moving off the @midwest-design web component library.