Handle selected values in Autocomplete

baoagency · Jan 12, 2022 · c33c3f3 · c33c3f3
1 parent 90981e6
commit c33c3f3
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/app/assets/javascripts/polaris_view_components.js b/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 {

diff --git a/app/assets/javascripts/polaris_view_components/autocomplete_controller.js b/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)
+    })
+  }
 }
diff --git a/app/components/polaris/autocomplete_component.rb b/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
 

diff --git a/demo/test/components/previews/forms/autocomplete_component_preview/multiselect.html.erb b/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") %>