Get rid of decorated select altogether

app/models/custom_actions/actions/base.rb

@@ -43,6 +43,12 @@ def allowed_values
     raise NotImplementedError
   end
 
+  def value_objects
+    values.map do |value|
+      allowed_values.find { |v| v[:value] == value }
+    end
+  end
+
   def type
     raise NotImplementedError
   end

app/models/custom_actions/conditions/base.rb

@@ -45,6 +45,12 @@ def allowed_values
       .map { |value, label| { value:, label: } }
   end
 
+  def value_objects
+    values.map do |value|
+      allowed_values.find { |v| v[:value] == value }
+    end
+  end
+
   def human_name
     WorkPackage.human_attribute_name(self.class.key)
   end

app/views/custom_actions/_form.html.erb

@@ -32,18 +32,17 @@
                                       }
             %>
           <% else %>
-            <% selected_values = condition.values
-               select_options = condition.allowed_values.map { |v| { label: v[:label], value: v[:value], selected: selected_values.include?(v[:value]) } } %>
-            <%= render partial: 'augmented/autocomplete_select_decoration',
-                       locals: {
-                         select_options:,
-                         inputs: {
-                           inputName: input_name,
-                           inputId: "custom_action_conditions_#{condition.key}",
-                           multiple: true,
-                           key: condition.key.to_s
-                         }
-                       } %>
+            <%= angular_component_tag 'opce-autocompleter',
+                                      inputs: {
+                                        multiple: true,
+                                        defaultData: false,
+                                        items: condition.allowed_values.map { |v| { id: v[:value], name: v[:label] } },
+                                        model: condition.value_objects.map { |v| { id: v[:value], name: v[:label] } },
+                                        inputName: input_name,
+                                        inputId: "custom_action_conditions_#{condition.key}",
+                                        appendTo: "body",
+                                      }
+            %>
           <% end %>
         </div>
       </div>
@@ -79,18 +78,17 @@
                                             }
                   %>
                 <% else %>
-                  <% selected_values = action.values
-                     select_options = action.allowed_values.map { |v| { label: v[:label], value: v[:value], selected: selected_values.include?(v[:value]) } } %>
-                  <%= render partial: 'augmented/autocomplete_select_decoration',
-                             locals: {
-                               select_options:,
-                               inputs: {
-                                 inputName: input_name,
-                                 inputId: "custom_action_actions_#{action.key}",
-                                 multiple: action.multi_value?,
-                                 key: action.key.to_s
-                               }
-                             } %>
+                  <%= angular_component_tag 'opce-autocompleter',
+                                            inputs: {
+                                              multiple: true,
+                                              defaultData: false,
+                                              items: action.allowed_values.map { |v| { id: v[:value], name: v[:label] } },
+                                              model: action.value_objects.map { |v| { id: v[:value], name: v[:label] } },
+                                              inputName: input_name,
+                                              inputId: "custom_action_conditions_#{action.key}",
+                                              appendTo: "body",
+                                            }
+                  %>
                 <% end %>
               </div>
             </div>

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts

@@ -146,7 +146,7 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
 
   @Input() public items?:IOPAutocompleterOption[]|HalResource[];
 
-  private items$ = new BehaviorSubject(null);
+  private items$ = new BehaviorSubject<IOPAutocompleterOption[]|null>(null);
 
   @Input() public clearSearchOnAdd?:boolean = true;
 
@@ -314,6 +314,10 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
       this.typeahead = new BehaviorSubject<string>('');
     }
 
+    if (this.items) {
+      this.items$.next(this.items as IOPAutocompleterOption[]);
+    }
+
     if (this.inputValue && !this.model) {
       this
         .opAutocompleterService
@@ -328,8 +332,7 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
 
   ngOnChanges(changes:SimpleChanges):void {
     if (changes.items) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      this.items$.next(changes.items.currentValue);
+      this.items$.next(changes.items.currentValue as IOPAutocompleterOption[]);
     }
   }
 

lib/primer/open_project/forms/autocompleter.html.erb

@@ -1,31 +1,9 @@
 <%= render(FormControl.new(input: @input, data: @wrapper_data_attributes)) do %>
   <%= content_tag(:div, **@field_wrap_arguments) do %>
-    <% if decorated_select? %>
-      <%= render partial: '/augmented/autocomplete_select_decoration',
-                 formats: %i[html],
-                 locals: {
-                   inputs: @autocomplete_options.merge(
-                     classes: "ng-select--primerized #{@input.invalid? ? '-error' : ''}",
-                     inputName: @autocomplete_options.fetch(:inputName) { builder.field_name(@input.name) },
-                     inputId: @autocomplete_options.fetch(:inputId) { builder.field_id(@input.name) },
-                     inputValue: @autocomplete_options.fetch(:inputValue) { builder.object.send(@input.name) },
-                     key: @autocomplete_options.fetch(:resource, ''),
-                     defaultData: @autocomplete_options.fetch(:defaultData) { true }
-                   ),
-                   select_options: select_options.map(&:to_h),
-                 } %>
-    <% else %>
-      <%= content_tag(:div, class: ("projects-autocomplete-with-search-icon" if @autocomplete_options.delete(:with_search_icon))) do %>
-        <%= angular_component_tag @autocomplete_options.fetch(:component),
-                                  data: @autocomplete_options.delete(:data) { {} },
-                                  inputs: @autocomplete_options.merge(
-                                    classes: "ng-select--primerized #{@input.invalid? ? '-error' : ''}",
-                                    inputName: @autocomplete_options.fetch(:inputName) { builder.field_name(@input.name) },
-                                    inputValue: @autocomplete_options.fetch(:inputValue) { builder.object.send(@input.name) },
-                                    defaultData: @autocomplete_options.fetch(:defaultData) { true }
-                                  )
-        %>
-      <% end %>
+    <%= content_tag(:div, class: ("projects-autocomplete-with-search-icon" if @with_search_icon)) do %>
+      <%= angular_component_tag(@autocomplete_component,
+                                data: @autocomplete_data,
+                                inputs: @autocomplete_inputs) %>
     <% end %>
   <% end %>
 <% end %>

lib/primer/open_project/forms/autocompleter.rb

@@ -8,17 +8,38 @@ class Autocompleter < Primer::Forms::BaseComponent
         include AngularHelper
         prepend WrappedInput
 
-        delegate :builder, :form, :select_options, to: :@input
+        delegate :builder, :form, to: :@input
 
         def initialize(input:, autocomplete_options:, wrapper_data_attributes: {})
           super()
           @input = input
-          @autocomplete_options = autocomplete_options
+          @with_search_icon = autocomplete_options.delete(:with_search_icon) { false }
+          @autocomplete_component = autocomplete_options.delete(:component) { "opce-autocompleter" }
+          @autocomplete_data = autocomplete_options.delete(:data) { {} }
+          @autocomplete_inputs = extend_autocomplete_inputs(autocomplete_options)
           @wrapper_data_attributes = wrapper_data_attributes
         end
 
-        def decorated_select?
-          @autocomplete_options[:decorated]
+        def extend_autocomplete_inputs(inputs)
+          inputs[:classes] = "ng-select--primerized #{@input.invalid? ? '-error' : ''}"
+          inputs[:inputName] ||= builder.field_name(@input.name)
+          inputs[:inputValue] ||= builder.object.send(@input.name)
+          inputs[:defaultData] ||= true
+
+          if inputs.delete(:decorated)
+            inputs[:items] = @input.select_options.map(&:to_h)
+            inputs[:model] = selected_options
+            inputs[:defaultData] = false
+          end
+
+          inputs
+        end
+
+
+        def selected_options
+          @input.select_options.filter_map do |item|
+            item.value if item.selected
+          end
         end
       end
     end

lib/primer/open_project/forms/dsl/autocompleter_input.rb

@@ -18,9 +18,8 @@ def initialize(label:, value:, selected: false)
 
             def to_h
               {
-                label:,
-                value:,
-                selected:
+                id: value,
+                name: label
               }
             end
           end