From 9a50f8fbd1b43cff859810054dd5e0ce7566a0d6 Mon Sep 17 00:00:00 2001 From: Cameron Hessler Date: Tue, 1 Mar 2022 11:09:39 -0600 Subject: [PATCH 1/4] fix(Dropdown): uncontrolled visibility Fix an issue where the visibility property becomes controlled if the visible PROP is defined, but it's VALUE is undefined --- src/Dropdown.tsx | 2 +- tests/basic.test.js | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx index c800c46..64e7fab 100644 --- a/src/Dropdown.tsx +++ b/src/Dropdown.tsx @@ -63,7 +63,7 @@ function Dropdown(props: DropdownProps, ref) { } = props; const [triggerVisible, setTriggerVisible] = React.useState(); - const mergedVisible = 'visible' in props ? visible : triggerVisible; + const mergedVisible = visible !== undefined ? visible : triggerVisible; const triggerRef = React.useRef(null); React.useImperativeHandle(ref, () => triggerRef.current); diff --git a/tests/basic.test.js b/tests/basic.test.js index 348ac8d..ccdd682 100644 --- a/tests/basic.test.js +++ b/tests/basic.test.js @@ -45,7 +45,7 @@ describe('dropdown', () => { expect(dropdown.find('.my-button').hasClass('rc-dropdown-open')).toBe(true); }); - it('supports constrolled visible prop', () => { + it('supports controlled visible prop', () => { const onVisibleChange = jest.fn(); const dropdown = mount( { ); const dropdown = mount( - + , ); From 2d151f46717b7738864013e5690692574fba96f7 Mon Sep 17 00:00:00 2001 From: Cameron Hessler Date: Wed, 13 Apr 2022 13:34:47 -0500 Subject: [PATCH 2/4] fix(Dropdown): uncontrolled visibility Created a separate test case for when visibility is undefined --- tests/__snapshots__/basic.test.js.snap | 52 ++++++++++++++++++++++++++ tests/basic.test.js | 43 +++++++++++++++++++++ 2 files changed, 95 insertions(+) diff --git a/tests/__snapshots__/basic.test.js.snap b/tests/__snapshots__/basic.test.js.snap index 911b563..5098d1d 100644 --- a/tests/__snapshots__/basic.test.js.snap +++ b/tests/__snapshots__/basic.test.js.snap @@ -1,5 +1,57 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`dropdown controls visibility when visible is undefined 1`] = ` +Array [ + , +
+
+ + +
, +] +`; + exports[`dropdown simply works 1`] = ` Array [ + , + ); + expect(dropdown.find('.my-button')).toBeTruthy(); + expect(dropdown.find('.rc-dropdown')).toBeTruthy(); + + dropdown.find('.my-button').simulate('click'); + expect(clicked).toBeUndefined(); + expect(getPopupDomNode(dropdown).classList.contains('rc-dropdown-hidden')).toBe(false); + expect(dropdown.render()).toMatchSnapshot(); + + dropdown.find('.my-menuitem').simulate('click'); + expect(clicked).toBe('1'); + expect(overlayClicked).toBe('1'); + expect(getPopupDomNode(dropdown).classList.contains('rc-dropdown-hidden')).toBe(true); + }); + + it('controls visibility when visible is undefined', async () => { + // Make sure dropdown component is still "" + let clicked; + let overlayClicked; + + function onClick({ key }) { + clicked = key; + } + + function onOverlayClick({ key }) { + overlayClicked = key; + } + const menu = ( @@ -90,6 +131,8 @@ describe('dropdown', () => { trigger={['click']} overlay={menu} onOverlayClick={onOverlayClick} + // If visible is undefined, let dropdown control the component's + // visible state, not the consumer visible={undefined} > From ab684b9792305354e5b3e09bcd194ac769962516 Mon Sep 17 00:00:00 2001 From: Cameron Hessler Date: Thu, 28 Apr 2022 15:52:25 -0500 Subject: [PATCH 3/4] fix(Dropdown): visibility is controlled when undefined Updated the rc-trigger dependency per PR comment. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 84ffff1..6af4f3a 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "^2.2.6", - "rc-trigger": "^5.0.4", + "rc-trigger": "^5.2.18", "rc-util": "^5.17.0" } } From 437f05474552b2f9f4da9d3f447a7c4caaeac3e6 Mon Sep 17 00:00:00 2001 From: Cameron Hessler Date: Tue, 3 May 2022 10:32:16 -0500 Subject: [PATCH 4/4] fix(Dropdown): uncontrolled visibility Fix issues with tests. Removed accidentially commited snapshot and also editing existing snapshot after updating rc-trigger --- tests/__snapshots__/basic.test.js.snap | 54 +------------------------- tests/basic.test.js | 1 - 2 files changed, 1 insertion(+), 54 deletions(-) diff --git a/tests/__snapshots__/basic.test.js.snap b/tests/__snapshots__/basic.test.js.snap index 5098d1d..9f0c104 100644 --- a/tests/__snapshots__/basic.test.js.snap +++ b/tests/__snapshots__/basic.test.js.snap @@ -1,57 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`dropdown controls visibility when visible is undefined 1`] = ` -Array [ - , -
-
- - -
, -] -`; - exports[`dropdown simply works 1`] = ` Array [