fix: select-field not showing in correct place

dhis2 · Sep 8, 2023 · bfb86e2 · bfb86e2
1 parent 300a304
commit bfb86e2
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 1 deletion.
diff --git 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
@@ -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
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
@@ -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
@@ -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>
+            </>
+        )
+    })