fix: dropdown: fix visible prop

src/components/Dropdown/Dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import {
@@ -10,6 +10,7 @@ import {
 import { Icon, IconName } from '../Icon';
 import { Dropdown } from './';
 import { List } from '../List';
+import { Stack } from '../Stack';
 
 export default {
   title: 'Dropdown',
@@ -192,6 +193,37 @@ const Dropdown_Div_Story: ComponentStory<typeof Dropdown> = (args) => {
 
 export const Dropdown_Div = Dropdown_Div_Story.bind({});
 
+const Dropdown_External_Story: ComponentStory<typeof Dropdown> = (args) => {
+  const [visible, setVisibility] = useState(false);
+  return (
+    <Stack direction="horizontal" flexGap="xxl">
+      <DefaultButton
+        alignIcon={ButtonIconAlign.Right}
+        checked={visible}
+        onClick={() => setVisibility(!visible)}
+        text={'External Control'}
+        toggle
+      />
+      <Dropdown
+        {...args}
+        visible={visible}
+        onVisibleChange={(isVisible) => setVisibility(isVisible)}
+      >
+        <DefaultButton
+          alignIcon={ButtonIconAlign.Right}
+          text={'Click button start'}
+          iconProps={{
+            path: IconName.mdiChevronDown,
+            rotate: visible ? 180 : 0,
+          }}
+        />
+      </Dropdown>
+    </Stack>
+  );
+};
+
+export const Dropdown_External = Dropdown_External_Story.bind({});
+
 const dropdownArgs: Object = {
   trigger: 'click',
   classNames: 'my-dropdown-class',
@@ -218,3 +250,7 @@ Dropdown_Div.args = {
 Dropdown_IconButton.args = {
   ...dropdownArgs,
 };
+
+Dropdown_External.args = {
+  ...dropdownArgs,
+};

src/components/Dropdown/Dropdown.test.tsx

@@ -116,6 +116,38 @@ const ComplexDropdownComponent = (): JSX.Element => {
   );
 };
 
+const ExternalElementDropdownComponent = (): JSX.Element => {
+  const [visible, setVisibility] = useState(false);
+
+  return (
+    <Stack direction="horizontal" flexGap="xxl">
+      <DefaultButton
+        alignIcon={ButtonIconAlign.Right}
+        checked={visible}
+        data-testid="test-external-button-id"
+        onClick={() => setVisibility(!visible)}
+        text={'External Control'}
+        toggle
+      />
+      <Dropdown
+        {...dropdownProps}
+        visible={visible}
+        onVisibleChange={(isVisible) => setVisibility(isVisible)}
+      >
+        <DefaultButton
+          alignIcon={ButtonIconAlign.Right}
+          text={'Dropdown menu test'}
+          iconProps={{
+            path: IconName.mdiChevronDown,
+            rotate: visible ? 180 : 0,
+          }}
+          data-testid="test-button-id"
+        />
+      </Dropdown>
+    </Stack>
+  );
+};
+
 describe('Dropdown', () => {
   beforeAll(() => {
     matchMedia = new MatchMediaMock();
@@ -181,4 +213,26 @@ describe('Dropdown', () => {
     );
     expect(dropdownAriaRef.getAttribute('aria-expanded')).toBe('true');
   });
+
+  test('Should support visible prop toggle via external element', async () => {
+    const { container } = render(<ExternalElementDropdownComponent />);
+    const externalElement = screen.getByTestId('test-external-button-id');
+    const referenceElement = screen.getByTestId('test-button-id');
+    externalElement.click();
+    await waitFor(() => screen.getByText('User profile 1'));
+    const option1 = screen.getByText('User profile 1');
+    expect(option1).toBeTruthy();
+    expect(container.querySelector('.dropdown-wrapper')?.classList).toContain(
+      'my-dropdown-class'
+    );
+    expect(referenceElement.getAttribute('aria-expanded')).toBe('true');
+    externalElement.click();
+    await waitFor(() =>
+      expect(referenceElement.getAttribute('aria-expanded')).toBe('false')
+    );
+    expect(container.querySelector('.dropdown-wrapper')).toBeFalsy();
+    externalElement.click();
+    await waitFor(() => screen.getByText('User profile 1'));
+    expect(option1).toBeTruthy();
+  });
 });

src/components/Dropdown/Dropdown.tsx

@@ -27,6 +27,7 @@ import {
 import { Menu } from '../Menu';
 import { useMergedState } from '../../hooks/useMergedState';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside';
+import { usePreviousState } from '../../hooks/usePreviousState';
 import {
   ConditionalWrapper,
   eventKeys,
@@ -73,6 +74,8 @@ export const Dropdown: FC<DropdownProps> = React.memo(
       });
 
       const [closing, setClosing] = useState<boolean>(false);
+      const previouslyClosing: boolean = usePreviousState(closing);
+
       const dropdownId: string = uniqueId('dropdown-');
       const [dropdownReferenceId, setReferenceElementId] = useState<string>(
         `${dropdownId}reference`
@@ -90,7 +93,7 @@ export const Dropdown: FC<DropdownProps> = React.memo(
         (show: boolean, showDropdown = (show: boolean) => show): Function =>
         (e: SyntheticEvent): void => {
           // to control the toggle behaviour
-          const updatedShow = showDropdown(show);
+          const updatedShow: boolean = showDropdown(show);
           if (PREVENT_DEFAULT_TRIGGERS.includes(trigger)) {
             e.preventDefault();
           }
@@ -99,6 +102,9 @@ export const Dropdown: FC<DropdownProps> = React.memo(
           timeout = setTimeout(
             () => {
               setVisible(updatedShow);
+              if (!previouslyClosing) {
+                setClosing(false);
+              }
               onVisibleChange?.(updatedShow);
             },
             !show ? ANIMATION_DURATION : 0
@@ -114,15 +120,19 @@ export const Dropdown: FC<DropdownProps> = React.memo(
         (e) => {
           const referenceElement: HTMLElement =
             document.getElementById(dropdownReferenceId);
-          if (closeOnOutsideClick && closeOnReferenceClick) {
+          if (closeOnOutsideClick && closeOnReferenceClick && !mergedVisible) {
             toggle(false)(e);
           }
           if (
             !closeOnReferenceClick &&
-            !referenceElement.contains(e.target as Node)
+            !referenceElement.contains(e.target as Node) &&
+            !mergedVisible
           ) {
             toggle(false)(e);
           }
+          if (!mergedVisible) {
+            toggle(false)(e);
+          }
           onClickOutside?.(e);
         },
         mergedVisible