avo 2.42.2 → 2.44.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 85975e5896ef4f49e8ca3b4874470092dfd64eafd7c0282a8715162c9dfc42bc
-  data.tar.gz: c90db50a988c7cc7bf66cbc5671844390f28455f4d09f421b86d49caf86f588a
+  metadata.gz: 6b2cdd36d7332c119809608975ea38e68d2bfe09987e9203b9f39149292885a7
+  data.tar.gz: 9e00cbe1f725979bf1c61164ae0912e20eff340ff727b4eb27c7212ed1500897
 SHA512:
-  metadata.gz: 98b4bc5ccb0193c5ef46da23c582a3da7ee3bf8fc8ae5516232b4ea6f0b98df0fa3a798be6498019e76aa735fd37b6cbfff1d6514d3be3a6628b6b7af56e6431
-  data.tar.gz: ef6fee4b84d1cbf589a0160785005e568c2c8f2a6dad77da7692170c8819e89ad7202ee4f26944180c34a4bd19e6953c50ad96534ce8ca33e2582745ec7bf3c6
+  metadata.gz: 6fd7ac16fac942d14da9c82317a0f8c322cdd0b1af785319c4cc273badd5e528a73c0f87e8b12bf8673fe35e8c6cfe61ac3f578b044797e64cb1c7c3158de677
+  data.tar.gz: 87a8e856ca13470d32119b71685300dc1759f6455fc86742284e1e41f573500bb016bf0105e6e3fce48f0362a50d06f0905660d681a7345987afd5827a4ed7ff

data/Gemfile

@@ -167,3 +167,5 @@ gem "image_processing", "~> 1.12"
 gem "prefixed_ids"
 
 gem "mapkick-rb", "~> 0.1.4"
+
+gem "turbo_power", "~> 0.5.0"

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (2.42.2)
+    avo (2.44.0)
       actionview (>= 6.0)
       active_link_to
       activerecord (>= 6.0)
@@ -13,6 +13,7 @@ PATH
       meta-tags
       pagy
       turbo-rails
+      turbo_power (~> 0.5.0)
       view_component (>= 2.54.0)
       zeitwerk (>= 2.6.2)
 
@@ -419,6 +420,8 @@ GEM
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
       railties (>= 6.0.0)
+    turbo_power (0.5.0)
+      turbo-rails (~> 1.3)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.4.0)
@@ -518,6 +521,7 @@ DEPENDENCIES
   sprockets-rails
   standard
   test-prof
+  turbo_power (~> 0.5.0)
   tzinfo-data
   web-console (>= 3.3.0)
   webdrivers (>= 5.3.0)

data/app/components/avo/fields/belongs_to_field/edit_component.html.erb

@@ -1,115 +1,137 @@
-<% if is_polymorphic? %>
-  <%
-    # Set the model keys so we can pass them over
-    model_keys = @field.types.map do |type|
-      resource = Avo::App.get_resource_by_model_name(type.to_s)
-      [type.to_s, resource.model_key]
-    end.to_h
-  %>
-  <div class="divide-y"
-    data-controller="belongs-to-field"
-    data-searchable="<%= @field.searchable %>"
-    data-association="<%= @field.id %>"
-    data-association-class="<%= @field&.target_resource&.model_class || nil %>"
-  >
-    <%= field_wrapper **field_wrapper_args, help: @field.polymorphic_help || '' do %>
-      <%= @form.select @field.type_input_foreign_key, @field.types.map { |type| [::Avo::App.get_resource_by_model_name(type.to_s).name, type.to_s] },
-      {
-        value: @field.value,
-        include_blank: @field.placeholder,
-      },
-      {
-        class: classes("w-full"),
-        data: {
-          **@field.get_html(:data, view: view, element: :input),
-          action: "change->belongs-to-field#changeType #{field_html_action}",
-          'belongs-to-field-target': "select",
-        },
-        disabled: disabled
-      }
+<div data-controller="reload-belongs-to-field"
+     data-action="turbo:before-stream-render@document->reload-belongs-to-field#beforeStreamRender"
+     data-reload-belongs-to-field-polymorphic-value="<%= is_polymorphic? %>"
+     data-reload-belongs-to-field-searchable-value="<%= @field.searchable %>"
+     data-reload-belongs-to-field-relation-name-value="<%= @field.id %>"
+     data-reload-belongs-to-field-target-name-value="<%= form.object_name %>[<%= @field.id_input_foreign_key %>]"
+>
+  <% if is_polymorphic? %>
+    <%
+      # Set the model keys so we can pass them over
+      model_keys = @field.types.map do |type|
+        resource = Avo::App.get_resource_by_model_name(type.to_s)
+        [type.to_s, resource.model_key]
+      end.to_h
     %>
-      <%
-        # If the select field is disabled, no value will be sent. It's how HTML works.
-        # Thus the extra hidden field to actually send the related id to the server.
-        if disabled %>
-        <%= @form.hidden_field @field.type_input_foreign_key %>
+    <div class="divide-y"
+      data-controller="belongs-to-field"
+      data-searchable="<%= @field.searchable %>"
+      data-association="<%= @field.id %>"
+      data-association-class="<%= @field&.target_resource&.model_class || nil %>"
+    >
+      <%= field_wrapper **field_wrapper_args, help: @field.polymorphic_help || '' do %>
+        <%= @form.select @field.type_input_foreign_key, @field.types.map { |type| [::Avo::App.get_resource_by_model_name(type.to_s).name, type.to_s] },
+        {
+          value: @field.value,
+          include_blank: @field.placeholder,
+        },
+        {
+          class: classes("w-full"),
+          data: {
+            **@field.get_html(:data, view: view, element: :input),
+            action: "change->belongs-to-field#changeType #{field_html_action}",
+            'belongs-to-field-target': "select",
+          },
+          disabled: disabled
+        }
+      %>
+        <%
+          # If the select field is disabled, no value will be sent. It's how HTML works.
+          # Thus the extra hidden field to actually send the related id to the server.
+          if disabled %>
+          <%= @form.hidden_field @field.type_input_foreign_key %>
+        <% end %>
       <% end %>
-    <% end %>
-    <% @field.types.each do |type| %>
-      <div class="hidden"
-        data-belongs-to-field-target="type"
-        data-type="<%= type %>"
-      >
-        <%= field_wrapper **field_wrapper_args, label: ::Avo::App.get_resource_by_model_name(type.to_s).name do %>
-          <% if @field.searchable %>
-            <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: @form,
-              disabled: disabled,
-              field: @field,
-              foreign_key: @field.id_input_foreign_key,
-              model_key: model_keys[type.to_s],
-              polymorphic_record: polymorphic_record,
-              resource: @resource,
-              style: @field.get_html(:style, view: view, element: :input),
-              type: type,
-              classes: classes("w-full"),
-              view: view
+      <% @field.types.each do |type| %>
+        <div class="hidden"
+          data-belongs-to-field-target="type"
+          data-type="<%= type %>"
+        >
+          <%= field_wrapper **field_wrapper_args, label: ::Avo::App.get_resource_by_model_name(type.to_s).name do %>
+            <div class="flex flex-col gap-1">
+              <% if @field.searchable %>
+                <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: @form,
+                  disabled: disabled,
+                  field: @field,
+                  foreign_key: @field.id_input_foreign_key,
+                  model_key: model_keys[type.to_s],
+                  polymorphic_record: polymorphic_record,
+                  resource: @resource,
+                  style: @field.get_html(:style, view: view, element: :input),
+                  type: type,
+                  classes: classes("w-full"),
+                  view: view
+              %>
+              <% else %>
+                <%= @form.select @field.id_input_foreign_key,
+                options_for_select(@field.values_for_type(type), @resource.present? && @resource.model.present? ? @resource.model[@field.id_input_foreign_key] : nil),
+                {
+                  value: @resource.model[@field.id_input_foreign_key].to_s,
+                  include_blank: @field.placeholder,
+                },
+                {
+                  class: classes("w-full"),
+                  data: @field.get_html(:data, view: view, element: :input),
+                  disabled: disabled
+                }
+              %>
+                <%
+                # If the select field is disabled, no value will be sent. It's how HTML works.
+                # Thus the extra hidden field to actually send the related id to the server.
+                if disabled %>
+                  <%= @form.hidden_field @field.id_input_foreign_key %>
+                <% end %>
+              <% end %>
+              <% create_href = create_path(::Avo::App.get_resource_by_model_name(type.to_s)) %>
+              <% if !disabled && create_href.present? %>
+                <%= link_to t("avo.create_new_item", item: type.to_s.downcase),
+                            create_href,
+                            class: "text-sm"
+                %>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <%= field_wrapper **field_wrapper_args do %>
+      <div class="flex flex-col gap-1">
+        <% if @field.searchable %>
+          <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: @form,
+            field: @field,
+            model_key: @field.target_resource&.model_key,
+            foreign_key: @field.id_input_foreign_key,
+            resource: @resource,
+            disabled: disabled,
+            classes: classes("w-full"),
+            view: view,
+            style: @field.get_html(:style, view: view, element: :input)
           %>
-          <% else %>
-            <%= @form.select @field.id_input_foreign_key,
-            options_for_select(@field.values_for_type(type), @resource.present? && @resource.model.present? ? @resource.model[@field.id_input_foreign_key] : nil),
+        <% else %>
+          <%= @form.select @field.id_input_foreign_key, @field.options,
             {
-              value: @resource.model[@field.id_input_foreign_key].to_s,
               include_blank: @field.placeholder,
+              value: @field.value
             },
             {
               class: classes("w-full"),
               data: @field.get_html(:data, view: view, element: :input),
-              disabled: disabled
+              disabled: disabled,
+              style: @field.get_html(:style, view: view, element: :input)
             }
           %>
-            <%
+          <%
             # If the select field is disabled, no value will be sent. It's how HTML works.
             # Thus the extra hidden field to actually send the related id to the server.
             if disabled %>
-              <%= @form.hidden_field @field.id_input_foreign_key %>
-            <% end %>
+            <%= @form.hidden_field @field.id_input_foreign_key %>
           <% end %>
         <% end %>
+        <% if !disabled && create_path.present? %>
+          <%= link_to t("avo.create_new_item", item: @field.name.downcase), create_path, class: "text-sm" %>
+        <% end %>
       </div>
     <% end %>
-  </div>
-<% else %>
-  <%= field_wrapper **field_wrapper_args do %>
-    <% if @field.searchable %>
-      <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: @form,
-        field: @field,
-        model_key: @field.target_resource&.model_key,
-        foreign_key: @field.id_input_foreign_key,
-        resource: @resource,
-        disabled: disabled,
-        classes: classes("w-full"),
-        view: view,
-        style: @field.get_html(:style, view: view, element: :input)
-      %>
-    <% else %>
-      <%= @form.select @field.id_input_foreign_key, @field.options,
-        {
-          include_blank: @field.placeholder,
-          value: @field.value
-        },
-        {
-          class: classes("w-full"),
-          data: @field.get_html(:data, view: view, element: :input),
-          disabled: disabled,
-          style: @field.get_html(:style, view: view, element: :input)
-        }
-      %>
-      <%
-        # If the select field is disabled, no value will be sent. It's how HTML works.
-        # Thus the extra hidden field to actually send the related id to the server.
-        if disabled %>
-        <%= @form.hidden_field @field.id_input_foreign_key %>
-      <% end %>
-    <% end %>
   <% end %>
-<% end %>
+</div>

data/app/components/avo/fields/belongs_to_field/edit_component.rb

@@ -57,6 +57,17 @@ class Avo::Fields::BelongsToField::EditComponent < Avo::Fields::EditComponent
     @field.get_html(:data, view: view, element: :input).fetch(:action, nil)
   end
 
+  def create_path(target_resource = nil)
+    return nil if @resource.blank?
+
+    helpers.new_resource_path(**{
+      via_relation: @field.id.to_s,
+      resource: target_resource || @field.target_resource,
+      via_resource_id: resource.model.to_param,
+      via_belongs_to_resource_class: resource.class.name
+    }.compact)
+  end
+
   private
 
   def visit_through_association?

data/app/components/avo/fields/tags_field/edit_component.html.erb

@@ -4,6 +4,7 @@
       tags_field_whitelist_items_value: @field.suggestions.to_json,
       tags_field_disallowed_items_value: @field.disallowed.to_json,
       tags_field_enforce_suggestions_value: @field.enforce_suggestions,
+      tags_field_suggestions_max_items_value: @field.suggestions_max_items,
       tags_field_close_on_select_value: @field.close_on_select,
       tags_field_delimiters_value: @field.delimiters,
       tags_field_fetch_values_from_value: @field.fetch_values_from,

data/app/components/avo/modal_component.html.erb

@@ -3,19 +3,26 @@
   data-modal-target="modal"
 >
   <div aria-expanded="true" class="modal-overlay absolute w-full h-full bg-opacity-25 bg-gray-800 flex justify-center items-center" data-action="click->modal#close"></div>
-  <div aria-expanded="true" role="dialog" aria-modal="true" class="modal-body rounded-lg inset-auto w-11/12 lg:w-1/2 sm:max-w-168 min-h-1/4 bg-white flex z-50 relative shadow-modal overflow-auto max-h-full">
+  <div aria-expanded="true" role="dialog" aria-modal="true" class="modal-body rounded-lg inset-auto bg-white flex z-50 relative shadow-modal overflow-auto  <%= width_classes %> <%= height_classes %>">
     <div class="flex-1 flex flex-col justify-between">
       <div>
-        <div class="p-6 text-2xl tracking-normal font-semibold text-black">
-          <%= heading %>
-        </div>
-        <div class="px-6 text-base text-gray-500">
-          <%= content %>
-        </div>
-      </div>
-      <div class="flex justify-end items-baseline space-x-4 p-4 bg-gray-100">
-        <%= controls %>
+        <% if heading? %>
+          <div class="p-6 text-2xl tracking-normal font-semibold text-black">
+            <%= heading %>
+          </div>
+        <% end %>
+
+        <% if content? %>
+          <div class="px-6 text-base text-gray-500 <%= body_class %>">
+            <%= content %>
+          </div>
+        <% end %>
       </div>
+      <% if controls? %>
+        <div class="flex justify-end items-baseline space-x-4 p-4 bg-gray-100">
+          <%= controls %>
+        </div>
+      <% end %>
     </div>
   </div>
 </div>

data/app/components/avo/modal_component.rb

@@ -3,4 +3,25 @@
 class Avo::ModalComponent < ViewComponent::Base
   renders_one :heading
   renders_one :controls
+
+  attr_reader :width
+  attr_reader :body_class
+
+  def initialize(width: :md, body_class: nil)
+    @width = width
+    @body_class = body_class
+  end
+
+  def width_classes
+    case width.to_sym
+    when :md
+      "w-11/12 lg:w-1/2 sm:max-w-168"
+    when :xl
+      "w-11/12 lg:w-3/4"
+    end
+  end
+
+  def height_classes
+    "max-h-full min-h-1/4 max-h-11/12"
+  end
 end

data/app/components/avo/panel_component.html.erb

@@ -32,12 +32,12 @@
         </div>
       </div>
       <% if sidebar? %>
-        <div class="w-full sm:w-1/3 flex-shrink-0 h-full <%= white_panel_classes %>">
+        <div class="max-w-full sm:w-1/3 flex-shrink-0 h-full <%= white_panel_classes %>">
           <%= sidebar %>
         </div>
       <% end %>
       <% if bare_sidebar? %>
-        <div class="w-full sm:w-1/3 flex-shrink-0 h-full">
+        <div class="max-w-full sm:w-1/3 flex-shrink-0 h-full">
           <%= bare_sidebar %>
         </div>
       <% end %>

data/app/components/avo/referrer_params_component.html.erb

@@ -3,4 +3,5 @@
 <%= hidden_field_tag :via_resource_class, params[:via_resource_class] if params[:via_resource_class] %>
 <%= hidden_field_tag :via_resource_id, params[:via_resource_id] if params[:via_resource_id] %>
 <%= hidden_field_tag :via_relation, params[:via_relation] if params[:via_relation] %>
+<%= hidden_field_tag :via_belongs_to_resource_class, params[:via_belongs_to_resource_class] if params[:via_belongs_to_resource_class] %>
 <%= hidden_field_tag :referrer, back_path if params[:via_resource_class] %>

data/app/components/avo/views/resource_edit_component.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag :div,
+  id: helpers.frame_id(@resource),
   data: {
     model_name: @resource.model_name.to_s,
     resource_name: @resource.class.to_s,
@@ -18,12 +19,16 @@
     multipart: true do |form| %>
     <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
     <%= content_tag :div, class: 'space-y-12' do %>
-      <%= render Avo::PanelComponent.new(name: title, description: @resource.resource_description, display_breadcrumbs: @reflection.blank?, index: 0, data: { panel_id: "main" }) do |c| %>
+      <%= render Avo::PanelComponent.new(name: title, description: @resource.resource_description,
+                                         display_breadcrumbs: display_breadcrumbs?,
+                                         index: 0, data: { panel_id: "main" }) do |c| %>
         <% c.with_tools do %>
-          <%= a_link back_path,
-            style: :text,
-            icon: 'arrow-left' do %>
-            <%= t('avo.cancel').capitalize %>
+          <% if back_path.present? %>
+            <%= a_link back_path,
+              style: :text,
+              icon: 'arrow-left' do %>
+              <%= t('avo.cancel').capitalize %>
+            <% end %>
           <% end %>
           <% if can_see_the_destroy_button? %>
             <%= a_link destroy_path,
@@ -68,7 +73,7 @@
             </div>
           <% end %>
         <% end %>
-        <% if sidebar.present? %>
+        <% if sidebar.present? && sidebar.visible_items.present? %>
           <% c.with_sidebar do %>
             <%= render sidebar_component form: form %>
           <% end %>

data/app/components/avo/views/resource_edit_component.rb

@@ -4,11 +4,12 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   include Avo::ResourcesHelper
   include Avo::ApplicationHelper
 
-  def initialize(resource: nil, model: nil, actions: [], view: :edit)
+  def initialize(resource: nil, model: nil, actions: [], view: :edit, display_breadcrumbs: true)
     @resource = resource
     @model = model
     @actions = actions
     @view = view
+    @display_breadcrumbs = display_breadcrumbs
   end
 
   def title
@@ -16,6 +17,7 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   end
 
   def back_path
+    return if via_belongs_to?
     return resource_view_path if via_resource?
     return resources_path if via_index?
 
@@ -46,12 +48,20 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
     @resource.authorization.authorize_action @view, raise_exception: false
   end
 
+  def display_breadcrumbs?
+    @reflection.blank? && @display_breadcrumbs
+  end
+
   private
 
   def via_index?
     params[:via_view] == "index"
   end
 
+  def via_belongs_to?
+    params[:via_belongs_to_resource_class].present?
+  end
+
   def is_edit?
     view.in?([:edit, :update])
   end

data/app/controllers/avo/actions_controller.rb

@@ -16,7 +16,6 @@ module Avo
       @view = :new
 
       @resource.hydrate(model: @model, view: @view, user: _current_user, params: params)
-      @model = ActionModel.new @action.get_attributes_for_action
     end
 
     def handle
@@ -79,19 +78,18 @@ module Avo
       end
 
       respond_to do |format|
-        format.html do
+        format.turbo_stream do
           # Flash the messages collected from the action
           flash_messages messages
 
           if response[:type] == :redirect
-            path = response[:path]
-
-            if path.respond_to? :call
-              path = instance_eval(&path)
-            end
-
-            redirect_to path, **{allow_other_host: response[:allow_other_host], status: response[:status]}.compact
-          elsif response[:type] == :reload
+            render turbo_stream: turbo_stream.redirect_to(
+              Avo::ExecutionContext.new(target: response[:path]).handle,
+              nil,
+              response[:redirect_args][:turbo_frame],
+              **response[:redirect_args].except(:turbo_frame)
+            )
+          else
             redirect_back fallback_location: resources_path(resource: @resource)
           end
         end
@@ -132,7 +130,7 @@ module Avo
 
       respond_to do |format|
         format.turbo_stream do
-          render "keep_modal_open"
+          render partial: "avo/partials/flash_alerts"
         end
       end
     end

data/app/controllers/avo/base_controller.rb

@@ -107,6 +107,11 @@ module Avo
       @model = @resource.model_class.new
       @resource = @resource.hydrate(model: @model, view: :new, user: _current_user)
 
+      # Handle special cases when creating a new record via a belongs_to relationship
+      if params[:via_belongs_to_resource_class].present?
+        return render turbo_stream: turbo_stream.append('attach_modal', partial: 'avo/base/new_via_belongs_to')
+      end
+
       set_actions
 
       @page_title = @resource.default_panel_name.to_s
@@ -130,7 +135,7 @@ module Avo
       @resource.hydrate(model: @model, view: :new, user: _current_user)
 
       # This means that the record has been created through another parent record and we need to attach it somehow.
-      if params[:via_resource_id].present?
+      if params[:via_resource_id].present? && params[:via_belongs_to_resource_class].nil?
         @reflection = @model._reflections[params[:via_relation]]
         # Figure out what kind of association does the record have with the parent record
 
@@ -420,15 +425,19 @@ module Avo
     end
 
     def create_success_action
+      return render "close_modal_and_reload_field" if params[:via_belongs_to_resource_class].present?
+
       respond_to do |format|
         format.html { redirect_to after_create_path, notice: create_success_message}
       end
     end
 
     def create_fail_action
+      flash.now[:error] = create_fail_message
+
       respond_to do |format|
-        flash.now[:error] = create_fail_message
         format.html { render :new, status: :unprocessable_entity }
+        format.turbo_stream { render "create_fail_action" }
       end
     end
 

data/app/helpers/avo/application_helper.rb

@@ -119,6 +119,10 @@ module Avo
       Avo::Filters::BaseFilter.encode_filters(filter_params)
     end
 
+    def frame_id(resource)
+      ["frame", resource.model_name.singular, resource.model.id].compact.join("-")
+    end
+
     private
 
     # Taken from the original library

data/app/javascript/js/application.js

@@ -2,6 +2,9 @@ import 'mapkick/bundle'
 
 import { Alert, Popover } from 'tailwindcss-stimulus-components'
 import { Application } from '@hotwired/stimulus'
+import TurboPower from 'turbo_power'
+
+TurboPower.initialize(Turbo.StreamActions)
 
 const application = Application.start()
 

data/app/javascript/js/controllers/fields/reload_belongs_to_field_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Used as a custom Stream Action <turbo-stream action="update-belongs-to" />
+export default class extends Controller {
+  static values = {
+    polymorphic: Boolean,
+    searchable: Boolean,
+    targetName: String,
+    relationName: String
+  }
+
+  beforeStreamRender(event) {
+    const { relationName } = event.target.dataset
+    if (event.target.action !== "update-belongs-to" || this.relationNameValue !== relationName) {
+      return false;
+    }
+
+    event.detail.render = (stream) => {
+      if (this.searchableValue) {
+        this.updateSearchable(stream)
+      } else{
+        this.updateNonSearchable(stream)
+      }
+    };
+  }
+
+  updateSearchable(stream) {
+    // Update the id component
+    document.querySelector(`input[name="${this.targetNameValue}"][type="hidden"]`).value = stream.dataset.targetResourceId
+    // Update the label
+    document.querySelector(`input[name="${this.targetNameValue}"][type="text"]`).value = stream.dataset.targetResourceLabel
+  }
+
+  updateNonSearchable(stream) {
+    const select = this.selectorContext(stream).querySelector(`select[name="${this.targetNameValue}"]`)
+    const option = document.createElement('option')
+    option.value = stream.dataset.targetResourceId
+    option.text = stream.dataset.targetResourceLabel
+    option.selected = true
+    select.appendChild(option)
+  }
+
+  selectorContext(stream) {
+    // if polymorphic, search for the select in the correct sub-container
+    if (this.polymorphicValue) {
+      return document.querySelector(`[data-type="${stream.dataset.targetResourceClass}"]`)
+    }
+
+    return document
+  }
+}

data/app/javascript/js/controllers/fields/tags_field_controller.js

@@ -15,6 +15,7 @@ export default class extends BaseController {
     enforceSuggestions: { type: Boolean, default: false },
     closeOnSelect: { type: Boolean, default: false },
     delimiters: { type: Array, default: [] },
+    suggestionsMaxItems: { type: Number, default: 20 },
     mode: String,
     fetchValuesFrom: String,
   }
@@ -36,7 +37,7 @@ export default class extends BaseController {
       enforceWhitelist: this.enforceSuggestionsValue || this.fetchValuesFromValue,
       delimiters: this.delimitersValue.join('|'),
       dropdown: {
-        maxItems: 20,
+        maxItems: this.suggestionsMaxItemsValue,
         enabled: 0,
         searchKeys: [this.labelAttributeValue],
         closeOnSelect: this.closeOnSelectValue,