chore(select-fallback): added fallback placement property for select

freshworks · Jun 26, 2023 · b6330ba · b6330ba
1 parent b6c8fc2
commit b6330ba
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 28 deletions.
diff --git a/packages/crayons-core/src/components/popover/popover.tsx b/packages/crayons-core/src/components/popover/popover.tsx
@@ -8,6 +8,7 @@ import {
   Method,
   Prop,
   h,
+  Watch,
 } from '@stencil/core';
 import { createPopper, Instance } from '@popperjs/core';
 import { PopoverPlacementType, PopoverTriggerType } from '../../utils/types';
@@ -184,6 +185,44 @@ export class Popover {
     }
   }
 
+  @Watch('boundary')
+  @Watch('placement')
+  @Watch('fallbackPlacements')
+  handlePlacementChange(): void {
+    this.popperInstance?.destroy();
+    this.popperInstance = null;
+    this.setPopperOptions();
+    this.updatePopper();
+  }
+
+  setPopperOptions() {
+    this.popperOptions = {
+      placement: this.placement,
+      strategy: this.hoist ? 'fixed' : 'absolute',
+      modifiers: [
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: this.fallbackPlacements,
+          },
+        },
+        {
+          name: 'preventOverflow',
+          options: {
+            boundary: this.boundary || 'clippingParents',
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: [Number(this.skidding), Number(this.distance)],
+          },
+        },
+        popperModifierRTL,
+      ],
+    };
+  }
+
   componentWillLoad() {
     this.contentRef = this.host.querySelector('[slot="popover-content"]');
     this.triggerRef = this.host.querySelector('[slot="popover-trigger"]');
@@ -225,31 +264,7 @@ export class Popover {
         }
       });
     }
-    this.popperOptions = {
-      placement: this.placement,
-      strategy: this.hoist ? 'fixed' : 'absolute',
-      modifiers: [
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: this.fallbackPlacements,
-          },
-        },
-        {
-          name: 'preventOverflow',
-          options: {
-            boundary: this.boundary || 'clippingParents',
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [Number(this.skidding), Number(this.distance)],
-          },
-        },
-        popperModifierRTL,
-      ],
-    };
+    this.setPopperOptions();
   }
 
   private async delay(ms: number) {

diff --git a/packages/crayons-core/src/components/select/readme.md b/packages/crayons-core/src/components/select/readme.md
@@ -1615,7 +1615,7 @@ Refer the [css variables](#css-custom-properties) for modifying the appearance o
 | `debounceTimer`      | `debounce-timer`    | Debounce timer for the search promise function.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `number`                                                                                                                                                             | `300`                                                                                                                              |
 | `disabled`           | `disabled`          | Disables the component on the interface. If the attribute’s value is undefined, the value is set to false.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `boolean`                                                                                                                                                            | `false`                                                                                                                            |
 | `errorText`          | `error-text`        | Error text displayed below the text box.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `string`                                                                                                                                                             | `''`                                                                                                                               |
-| `fallbackPlacements` | --                  | Alternative placement for popover if the default placement is not possible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `[PopoverPlacementType]`                                                                                                                                             | `['bottom']`                                                                                                                       |
+| `fallbackPlacements` | --                  | Alternative placement for popover if the default placement is not possible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `[PopoverPlacementType]`                                                                                                                                             | `['top']`                                                                                                                          |
 | `forceSelect`        | `force-select`      | If true, the user must select a value. The default value is not displayed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `boolean`                                                                                                                                                            | `true`                                                                                                                             |
 | `hintText`           | `hint-text`         | Hint text displayed below the text box.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `string`                                                                                                                                                             | `''`                                                                                                                               |
 | `hoist`              | `hoist`             | Option to prevent the select options from being clipped when the component is placed inside a container with `overflow: auto\|hidden\|scroll`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `boolean`                                                                                                                                                            | `false`                                                                                                                            |

diff --git a/packages/crayons-core/src/components/select/select.tsx b/packages/crayons-core/src/components/select/select.tsx
@@ -208,7 +208,7 @@ export class Select {
   /**
    * Alternative placement for popover if the default placement is not possible.
    */
-  @Prop() fallbackPlacements: [PopoverPlacementType] = ['bottom'];
+  @Prop() fallbackPlacements: [PopoverPlacementType] = ['top'];
   /**
    * The variant of tag to be used.
    */
@@ -994,7 +994,7 @@ export class Select {
               distance='8'
               trigger='manual'
               ref={(popoverRef) => (this.popoverRef = popoverRef)}
-              same-width={this.sameWidth}
+              sameWidth={this.sameWidth}
               placement={this.optionsPlacement}
               fallbackPlacements={this.fallbackPlacements}
               boundary={this.boundary}