From bfb86e2fac66ae93fe3bb0026d65d46dc6000660 Mon Sep 17 00:00:00 2001
From: mozafar <kabaros@gmail.com>
Date: Fri, 8 Sep 2023 10:39:12 +0100
Subject: [PATCH] fix: select-field not showing in correct place

---
 components/select/src/select/menu-wrapper.js  |  2 +-
 .../features/can_show_conditionally.feature   |  7 ++++
 .../features/can_show_conditionally/index.js  | 24 ++++++++++++
 .../single-select-field.stories.e2e.js        | 38 +++++++++++++++++++
 4 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 components/select/src/single-select-field/features/can_show_conditionally.feature
 create mode 100644 components/select/src/single-select-field/features/can_show_conditionally/index.js

diff --git a/components/select/src/select/menu-wrapper.js b/components/select/src/select/menu-wrapper.js
index 15b575e74d..b4a0dcfaa0 100644
--- a/components/select/src/select/menu-wrapper.js
+++ b/components/select/src/select/menu-wrapper.js
@@ -13,7 +13,7 @@ const MenuWrapper = ({
     selectRef,
 }) => {
     return (
-        <Layer onBackdropClick={onClick} transparent>
+        <Layer onBackdropClick={onClick} transparent disablePortal>
             <Popper
                 reference={selectRef}
                 placement="bottom-start"
diff --git a/components/select/src/single-select-field/features/can_show_conditionally.feature b/components/select/src/single-select-field/features/can_show_conditionally.feature
new file mode 100644
index 0000000000..d6386397ef
--- /dev/null
+++ b/components/select/src/single-select-field/features/can_show_conditionally.feature
@@ -0,0 +1,7 @@
+Feature: Position of SelectField
+
+    Scenario: Keeps position when parent is hidden initially
+        Given a Select is hidden initially
+        When someone hovers over it to show it
+        And clicks the select
+        Then the select dropdown should be in the correct position
\ No newline at end of file
diff --git a/components/select/src/single-select-field/features/can_show_conditionally/index.js b/components/select/src/single-select-field/features/can_show_conditionally/index.js
new file mode 100644
index 0000000000..a8fc6192fe
--- /dev/null
+++ b/components/select/src/single-select-field/features/can_show_conditionally/index.js
@@ -0,0 +1,24 @@
+import { Given, Then, When, And } from 'cypress-cucumber-preprocessor/steps'
+
+Given('a Select is hidden initially', () => {
+    cy.visitStory('SingleSelectField', 'With hidden parent')
+})
+
+When('someone hovers over it to show it', () => {
+    cy.get('.container .hiddenSelect').invoke('attr', 'style', 'display: block')
+})
+
+And('clicks the select', () => {
+    cy.get('[data-test="dhis2-uicore-select"]').click()
+})
+
+Then('the select dropdown should be in the correct position', () => {
+    cy.get('[data-test="hoverable-select-field"]').should('be.visible')
+    cy.get('[data-test="dhis2-uicore-singleselectoption"]').should(
+        ($selectField) => {
+            const { top, left } = $selectField.offset()
+            expect(top).to.be.greaterThan(0)
+            expect(left).to.be.greaterThan(0)
+        }
+    )
+})
diff --git a/components/select/src/single-select-field/single-select-field.stories.e2e.js b/components/select/src/single-select-field/single-select-field.stories.e2e.js
index 88f759a282..18a1035ce8 100644
--- a/components/select/src/single-select-field/single-select-field.stories.e2e.js
+++ b/components/select/src/single-select-field/single-select-field.stories.e2e.js
@@ -44,3 +44,41 @@ storiesOf('SingleSelectField', module)
     ))
     .add('With loading', () => <SingleSelectField loading />)
     .add('Without options', () => <SingleSelectField />)
+    .add('With hidden parent', () => {
+        return (
+            <>
+                <div className="container">
+                    <div className="hoverSpan">
+                        <span>Hover over me</span>
+                        <div className="hiddenSelect">
+                            <SingleSelectField
+                                dataTest="hoverable-select-field"
+                                label="Choose something"
+                                onChange={() => {}}
+                            >
+                                <SingleSelectOption value="1" label="one" />
+                                <SingleSelectOption value="2" label="two" />
+                            </SingleSelectField>
+                        </div>
+                    </div>
+                </div>
+                <style jsx>{`
+                    .container {
+                        width: 100%;
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 1rem;
+                    }
+                    .hiddenSelect {
+                        display: none;
+                    }
+                    .hoverSpan:hover .hiddenSelect {
+                        display: block;
+                    }
+                `}</style>
+            </>
+        )
+    })