fix: select-field not showing in correct place (#1400)

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"

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

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)
+        }
+    )
+})

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>
+        </>
+    )
+}