From acbdd0a70b77ae63520098ebf283bb1e9e91fe30 Mon Sep 17 00:00:00 2001 From: Wilhelm Behncke Date: Thu, 30 May 2024 12:49:33 +0200 Subject: [PATCH] BUGFIX: Render dropdown contents even when dropdown is closed Until now, dropdown contents were `null`ed when the dropdown is closed. This leads to unneccessary re-renders every time the dropdown visibility is toggled. This commit changes this logic. Dropdown contents are now always rendered, but hidden when the dropdown is closed. --- .../__snapshots__/contents.spec.tsx.snap | 15 ++++++++ .../src/DropDown/contents.spec.tsx | 2 +- .../src/DropDown/contents.tsx | 37 +++++++++---------- 3 files changed, 33 insertions(+), 21 deletions(-) create mode 100644 packages/react-ui-components/src/DropDown/__snapshots__/contents.spec.tsx.snap diff --git a/packages/react-ui-components/src/DropDown/__snapshots__/contents.spec.tsx.snap b/packages/react-ui-components/src/DropDown/__snapshots__/contents.spec.tsx.snap new file mode 100644 index 0000000000..7d7cadaeff --- /dev/null +++ b/packages/react-ui-components/src/DropDown/__snapshots__/contents.spec.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should not render when having no children. 1`] = ` + +`; diff --git a/packages/react-ui-components/src/DropDown/contents.spec.tsx b/packages/react-ui-components/src/DropDown/contents.spec.tsx index 205d9914ee..85bd3fb1a9 100644 --- a/packages/react-ui-components/src/DropDown/contents.spec.tsx +++ b/packages/react-ui-components/src/DropDown/contents.spec.tsx @@ -21,7 +21,7 @@ describe('', () => { it('should not render when having no children.', () => { const wrapper = shallow(); - expect(toJson(wrapper)).toBeFalsy(); + expect(toJson(wrapper)).toMatchSnapshot(); }); it('should allow the propagation of "className" with the "className" prop.', () => { diff --git a/packages/react-ui-components/src/DropDown/contents.tsx b/packages/react-ui-components/src/DropDown/contents.tsx index 9a1a757383..02b6d6d9bf 100644 --- a/packages/react-ui-components/src/DropDown/contents.tsx +++ b/packages/react-ui-components/src/DropDown/contents.tsx @@ -214,25 +214,22 @@ export default class ShallowDropDownContents extends PureComponent - {children} - - ); - - return scrollable - ? ReactDOM.createPortal(contents, document.body) - : contents; - } - return null; + const contents = ( +
    + {children} +
+ ); + + return scrollable + ? ReactDOM.createPortal(contents, document.body) + : contents; } }