From 7232ddee5d4745f31d379f21090556dd9814715a Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 2 Jul 2025 15:06:50 -0400
Subject: [PATCH] Dropdown fix (#1122)

* _blank

* fix dropdown flip/shift/ behavior when the viewport doesn't have space
---
 packages/webawesome/docs/.eleventy.js                 |  6 +++---
 packages/webawesome/docs/docs/resources/changelog.md  | 10 ++++++++--
 .../webawesome/src/components/dropdown/dropdown.css   |  3 ---
 .../webawesome/src/components/dropdown/dropdown.ts    | 11 ++++++++++-
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/webawesome/docs/.eleventy.js b/packages/webawesome/docs/.eleventy.js
index 5a5bfc0b9..0b79aea50 100644
--- a/packages/webawesome/docs/.eleventy.js
+++ b/packages/webawesome/docs/.eleventy.js
@@ -188,17 +188,17 @@ export default async function (eleventyConfig) {
       // Replace [issue:1234] with a link to the issue on GitHub
       {
         replace: /\[pr:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>',
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1" target="_blank">#$1</a>',
       },
       // Replace [pr:1234] with a link to the pull request on GitHub
       {
         replace: /\[issue:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>',
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1" target="_blank">#$1</a>',
       },
       // Replace [discuss:1234] with a link to the discussion on GitHub
       {
         replace: /\[discuss:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>',
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1" target="_blank">#$1</a>',
       },
     ]),
   );
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 59c0a3b2a..d0e7af3b5 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -8,12 +8,16 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
 
 Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
 
-## next
+## Next
 
 ### New Features {data-no-outline}
 
 - Added `.wa-hover-rows` to native styles to opt-in to highlighting table rows on hover.
 
+### Bug Fixes and Improvements {data-no-outline}
+
+- Fixed a bug in `<wa-dropdown>` that prevented the menu from flipping/shifting to keep the menu in the viewport [discuss:1106]
+
 ## 3.0.0-beta.1
 
 We're excited to share the first beta release of Web Awesome, which includes some breaking changes that make the library significantly more intuitive and consistent!
@@ -34,8 +38,10 @@ Many of these changes and improvements were the direct result of feedback from u
 - Renamed the `classic` theme to `shoelace`
 - Removed `:root` selector from all theme, color palette, and semantic color stylesheets except for the default theme and colors. All of these styles are now solely scoped to classes, such as `.wa-theme-awesome`, `.wa-palette-bright`, and `.wa-brand-orange`.
 - Removed most custom properties from components that can otherwise be styled with `::part()` selectors and standard CSS properties.
+  <<<<<<< HEAD
 - `<wa-dropdown>` was reworked and simplified to not use menu, menu item, menu label; use `<wa-dropdown-item>` instead
-- Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
+- Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:940]
+  > > > > > > > next
 - Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
 - Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
   - `<wa-button caret>` => `<wa-button with-caret>`
diff --git a/packages/webawesome/src/components/dropdown/dropdown.css b/packages/webawesome/src/components/dropdown/dropdown.css
index 199afc698..a45699f9b 100644
--- a/packages/webawesome/src/components/dropdown/dropdown.css
+++ b/packages/webawesome/src/components/dropdown/dropdown.css
@@ -6,9 +6,6 @@
 
 #menu {
   display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
   flex-direction: column;
   width: max-content;
   margin: 0;
diff --git a/packages/webawesome/src/components/dropdown/dropdown.ts b/packages/webawesome/src/components/dropdown/dropdown.ts
index 337697827..126c15e2f 100644
--- a/packages/webawesome/src/components/dropdown/dropdown.ts
+++ b/packages/webawesome/src/components/dropdown/dropdown.ts
@@ -698,7 +698,16 @@ export default class WaDropdown extends WebAwesomeElement {
     let active = this.hasUpdated ? this.popup.active : this.open;
 
     return html`
-      <wa-popup placement=${this.placement} distance=${this.distance} skidding=${this.skidding} ?active=${active}>
+      <wa-popup
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        ?active=${active}
+        flip
+        flip-fallback-strategy="best-fit"
+        shift
+        shift-padding="8"
+      >
         <slot
           name="trigger"
           slot="anchor"