From 4ec21acc7a9597bc13f0acb49fcf718a6187a1ed Mon Sep 17 00:00:00 2001
From: fajar-apri-alaska <Fajar.Apriansyah@alaskaair.com>
Date: Thu, 30 May 2024 14:02:48 +0700
Subject: [PATCH] fix: add relative positioning to div wrapper #187

- This commit addresses the positioning issue of `auro-dropdown`
when `auro-select` is placed inside `auro-dialog` component

Changes to be committed:
	modified:   package-lock.json
	modified:   src/auro-select.js
	modified:   src/style.scss
---
 package-lock.json  | 4 ++--
 src/auro-select.js | 2 +-
 src/style.scss     | 4 ++++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 466ddd9..99124bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@aurodesignsystem/auro-select",
-  "version": "2.10.1",
+  "version": "2.10.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@aurodesignsystem/auro-select",
-      "version": "2.10.1",
+      "version": "2.10.3",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
diff --git a/src/auro-select.js b/src/auro-select.js
index bd8b4fd..d7c99fb 100644
--- a/src/auro-select.js
+++ b/src/auro-select.js
@@ -501,7 +501,7 @@ export class AuroSelect extends LitElement {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`
-      <div>
+      <div class="outerWrapper">
         <div aria-live="polite" class="util_displayHiddenVisually">
           ${this.optionActive && this.options.length > 0
             ? html`
diff --git a/src/style.scss b/src/style.scss
index 397d835..28d99f2 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -54,6 +54,10 @@
   }
 }
 
+.outerWrapper {
+  position: relative;
+}
+
 auro-menuoption {
   pointer-events: none;
 }