Use TextField as Popover activator for Autocomplete (#325)

baoagency · Sep 29, 2023 · 8c83c33 · 8c83c33
1 parent ecdc02d
commit 8c83c33
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 7 deletions.
diff --git a/app/assets/javascripts/polaris_view_components.js b/app/assets/javascripts/polaris_view_components.js
@@ -2098,7 +2098,8 @@ class Popover extends Controller {
   static values={
     appendToBody: Boolean,
     placement: String,
-    active: Boolean
+    active: Boolean,
+    textFieldActivator: Boolean
   };
   connect() {
     if (this.appendToBodyValue) {
@@ -2120,8 +2121,8 @@ class Popover extends Controller {
     if (this.cleanup) {
       this.cleanup();
     }
-    this.cleanup = autoUpdate(this.activatorTarget, this.target, (() => {
-      computePosition(this.activatorTarget, this.target, {
+    this.cleanup = autoUpdate(this.activator, this.target, (() => {
+      computePosition(this.activator, this.target, {
         placement: this.placementValue,
         middleware: [ offset(5), flip(), shift({
           padding: 5
@@ -2158,6 +2159,13 @@ class Popover extends Controller {
     this.target.classList.remove(this.openClass);
     this.target.classList.add(this.closedClass);
   }
+  get activator() {
+    if (this.textFieldActivatorValue) {
+      return this.activatorTarget.querySelector('[data-controller="polaris-text-field"]');
+    } else {
+      return this.activatorTarget;
+    }
+  }
   get target() {
     if (this.hasPopoverTarget) {
       return this.popoverTarget;

diff --git a/app/assets/javascripts/polaris_view_components/popover_controller.js b/app/assets/javascripts/polaris_view_components/popover_controller.js
@@ -7,7 +7,8 @@ export default class extends Controller {
   static values = {
     appendToBody: Boolean,
     placement: String,
-    active: Boolean
+    active: Boolean,
+    textFieldActivator: Boolean
   }
 
   connect() {
@@ -34,8 +35,8 @@ export default class extends Controller {
     if (this.cleanup) {
       this.cleanup()
     }
-    this.cleanup = autoUpdate(this.activatorTarget, this.target, () => {
-      computePosition(this.activatorTarget, this.target, {
+    this.cleanup = autoUpdate(this.activator, this.target, () => {
+      computePosition(this.activator, this.target, {
         placement: this.placementValue,
         middleware: [
           offset(5),
@@ -80,6 +81,14 @@ export default class extends Controller {
     this.target.classList.add(this.closedClass)
   }
 
+  get activator() {
+    if (this.textFieldActivatorValue) {
+      return this.activatorTarget.querySelector('[data-controller="polaris-text-field"]')
+    } else {
+      return this.activatorTarget
+    }
+  }
+
   get target() {
     if (this.hasPopoverTarget) {
       return this.popoverTarget

diff --git a/app/components/polaris/autocomplete_component.rb b/app/components/polaris/autocomplete_component.rb
@@ -55,6 +55,7 @@ def popover_arguments
         alignment: :left,
         full_width: true,
         inline: false,
+        text_field_activator: true,
         wrapper_arguments: {}
       }.deep_merge(@popover_arguments).tap do |opts|
         opts[:wrapper_arguments][:data] ||= {}

diff --git a/app/components/polaris/popover_component.rb b/app/components/polaris/popover_component.rb
@@ -28,6 +28,7 @@ def initialize(
       position: POSITION_DEFAULT,
       append_to_body: false,
       scrollable_shadow: true,
+      text_field_activator: false,
       wrapper_arguments: {},
       **system_arguments
     )
@@ -41,6 +42,7 @@ def initialize(
       @alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)
       @position = fetch_or_fallback(POSITION_OPTIONS, position, POSITION_DEFAULT)
       @scrollable_shadow = scrollable_shadow
+      @text_field_activator = text_field_activator
       @append_to_body = append_to_body
       @wrapper_arguments = wrapper_arguments
       @system_arguments = system_arguments
@@ -56,6 +58,7 @@ def wrapper_arguments
         opts[:data][:polaris_popover_append_to_body_value] = @append_to_body
         opts[:data][:polaris_popover_active_value] = @active
         opts[:data][:polaris_popover_placement_value] = popover_placement
+        opts[:data][:polaris_popover_text_field_activator_value] = @text_field_activator
         opts[:data][:polaris_popover_open_class] = "Polaris-Popover__PopoverOverlay--open"
         opts[:data][:polaris_popover_closed_class] = "Polaris-Popover__PopoverOverlay--closed"
         if @inline

diff --git a/demo/app/previews/popover_component_preview/with_form.html.erb b/demo/app/previews/popover_component_preview/with_form.html.erb
@@ -1,4 +1,4 @@
-<%= polaris_popover(active: true, sectioned: true) do |popover| %>
+<%= polaris_popover(sectioned: true) do |popover| %>
   <% popover.with_button(disclosure: true) { "More actions" } %>
 
   <%= polaris_form_layout do |form_layout| %>