From 2a9a9d7da2a2ae2f86d1942a80deb6fe9c787d1e Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 22 Feb 2021 07:14:31 -0500
Subject: [PATCH] fixes #340

---
 docs/getting-started/changelog.md    |  1 +
 src/components.d.ts                  |  4 ++++
 src/components/dropdown/dropdown.tsx | 10 ++++++++++
 src/components/select/select.tsx     |  1 +
 src/utilities/popover.ts             |  4 ++++
 5 files changed, 20 insertions(+)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 3f51ee1e3..0063bd70d 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -17,6 +17,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added "Integrating with NextJS" tutorial to the docs, courtesy of [crutchcorn](https://github.com/crutchcorn)
 - Added `content` slot to `sl-tooltip` [#322](https://github.com/shoelace-style/shoelace/pull/322)
 - Fixed a bug in `sl-select` where removing a tag would toggle the dropdown
+- Fixed a bug in `sl-select` where the dropdown menu wouldn't reposition when the box resized [#340](https://github.com/shoelace-style/shoelace/issues/340)
 - Fixed a bug in `sl-input` and `sl-textarea` where the input might not exist when the value watcher is called [#313](https://github.com/shoelace-style/shoelace/issues/313)
 - Fixed a bug in `sl-details` where hidden elements would receive focus when tabbing [#323](https://github.com/shoelace-style/shoelace/issues/323)
 - Fixed a bug in `sl-icon` where `sl-error` would only be emitted for network failures [#326](https://github.com/shoelace-style/shoelace/pull/326)
diff --git a/src/components.d.ts b/src/components.d.ts
index 920e32b43..64b1f58d8 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -435,6 +435,10 @@ export namespace Components {
     | 'left'
     | 'left-start'
     | 'left-end';
+        /**
+          * Forces the dropdown's menu to reposition.
+         */
+        "reposition": () => Promise<void>;
         /**
           * Shows the dropdown panel
          */
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index b729acde5..754ec74e0 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -193,6 +193,16 @@ export class Dropdown {
     this.popover.hide();
   }
 
+  /** Forces the dropdown's menu to reposition. */
+  @Method()
+  async reposition() {
+    if (!this.open) {
+      return;
+    }
+
+    this.popover.reposition();
+  }
+
   focusOnTrigger() {
     const slot = this.trigger.querySelector('slot');
     const trigger = slot.assignedElements({ flatten: true })[0] as any;
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 3770c085d..0bef236f1 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -323,6 +323,7 @@ export class Select {
 
   resizeMenu() {
     this.menu.style.width = `${this.box.clientWidth}px`;
+    this.dropdown.reposition();
   }
 
   syncItemsFromValue() {
diff --git a/src/utilities/popover.ts b/src/utilities/popover.ts
index c6f23ee09..097d802da 100644
--- a/src/utilities/popover.ts
+++ b/src/utilities/popover.ts
@@ -118,6 +118,10 @@ export default class Popover {
     this.popover.classList.remove(this.options.visibleClass);
   }
 
+  reposition() {
+    this.popper.update();
+  }
+
   setOptions(options: PopoverOptions) {
     this.options = Object.assign(this.options, options);
     this.isVisible