From d97d640f92c1c42dbc92e46771b6a58870add895 Mon Sep 17 00:00:00 2001
From: Mozafar <mozafar@dhis2.org>
Date: Wed, 21 Aug 2024 08:23:14 +0100
Subject: [PATCH] fix: select-field not showing in correct place (#1400)

---
 components/select/src/select/menu-wrapper.js  |  2 +-
 .../features/can_show_conditionally.feature   |  7 ++++
 .../features/can_show_conditionally/index.js  | 24 ++++++++++++
 .../single-select-field.e2e.stories.js        | 39 +++++++++++++++++++
 4 files changed, 71 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 2411652dfc..accd027c17 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..7a8d116d0e
--- /dev/null
+++ b/components/select/src/single-select-field/features/can_show_conditionally/index.js
@@ -0,0 +1,24 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+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')
+})
+
+When('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.e2e.stories.js b/components/select/src/single-select-field/single-select-field.e2e.stories.js
index c9f76263b4..263f2e2205 100644
--- a/components/select/src/single-select-field/single-select-field.e2e.stories.js
+++ b/components/select/src/single-select-field/single-select-field.e2e.stories.js
@@ -43,3 +43,42 @@ export const WithFilterable = () => (
 )
 export const WithLoading = () => <SingleSelectField loading />
 export const WithoutOptions = () => <SingleSelectField />
+
+export const WithHiddenParent = () => {
+    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>
+        </>
+    )
+}