Handle selected values in Autocomplete

app/assets/javascripts/polaris_view_components.js

@@ -19,7 +19,8 @@ function formatBytes(bytes, decimals) {
 class Autocomplete extends Controller {
   static targets=[ "popover", "input", "results", "option", "emptyState" ];
   static values={
-    url: String
+    url: String,
+    selected: Array
   };
   connect() {
     this.inputTarget.addEventListener("input", this.onInputChange);
@@ -69,6 +70,7 @@ class Autocomplete extends Controller {
     if (this.visibleOptions.length > 0) {
       this.hideEmptyState();
       this.popoverController.show();
+      this.checkSelected();
     } else if (this.value.length > 0 && this.hasEmptyStateTarget) {
       this.showEmptyState();
     } else {
@@ -116,6 +118,13 @@ class Autocomplete extends Controller {
       this.resultsTarget.classList.remove("Polaris--hidden");
     }
   }
+  checkSelected() {
+    this.visibleOptions.forEach((option => {
+      const input = option.querySelector("input");
+      if (!input) return;
+      input.checked = this.selectedValue.includes(input.value);
+    }));
+  }
 }
 
 class Button extends Controller {

app/assets/javascripts/polaris_view_components/autocomplete_controller.js

@@ -4,7 +4,7 @@ import { debounce } from './utils'
 
 export default class extends Controller {
   static targets = ['popover', 'input', 'results', 'option', 'emptyState']
-  static values = { url: String }
+  static values = { url: String, selected: Array }
 
   connect() {
     this.inputTarget.addEventListener("input", this.onInputChange)
@@ -67,6 +67,7 @@ export default class extends Controller {
     if (this.visibleOptions.length > 0) {
       this.hideEmptyState()
       this.popoverController.show()
+      this.checkSelected()
     } else if (this.value.length > 0 && this.hasEmptyStateTarget) {
       this.showEmptyState()
     } else {
@@ -116,4 +117,13 @@ export default class extends Controller {
       this.resultsTarget.classList.remove('Polaris--hidden')
     }
   }
+
+  checkSelected() {
+    this.visibleOptions.forEach(option => {
+      const input = option.querySelector('input')
+      if (!input) return
+
+      input.checked = this.selectedValue.includes(input.value)
+    })
+  }
 }

app/components/polaris/autocomplete_component.rb

@@ -21,9 +21,15 @@ class AutocompleteComponent < NewComponent
     end
     renders_one :empty_state
 
-    def initialize(multiple: false, url: nil, **system_arguments)
+    def initialize(
+      multiple: false,
+      url: nil,
+      selected: [],
+      **system_arguments
+    )
       @multiple = multiple
       @url = url
+      @selected = selected
       @system_arguments = system_arguments
     end
 
@@ -35,6 +41,7 @@ def system_arguments
         if @url.present?
           opts[:data][:polaris_autocomplete_url_value] = @url
         end
+        opts[:data][:polaris_autocomplete_selected_value] = @selected
       end
     end
 

demo/test/components/previews/forms/autocomplete_component_preview/multiselect.html.erb

@@ -1,4 +1,4 @@
-<%= polaris_autocomplete(multiple: true) do |autocomplete| %>
+<%= polaris_autocomplete(multiple: true, selected: ["vinyl"]) do |autocomplete| %>
   <% autocomplete.text_field(label: "Tags", placeholder: "Search") do |c| %>
     <% c.prefix do %>
       <%= polaris_icon(name: "SearchMinor") %>