fixes #340

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)

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
          */

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;

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() {

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