Skip to content

THEOC-1722: Update dropdown to not close unless clicking outside #322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JessicaTatham wants to merge 6 commits into
base: master
Choose a base branch
from
Open

THEOC-1722: Update dropdown to not close unless clicking outside #322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
71f189c
linter
JessicaTatham Jan 25, 2021
28cb03f
update name of controlled param
JessicaTatham Jan 26, 2021
29dfd78
linter
JessicaTatham Jan 26, 2021
47a0b5b
update documentation
JessicaTatham Jan 26, 2021
9b2f7e6
linter
JessicaTatham Jan 26, 2021
dd3eb35
reveert snapshots
JessicaTatham Jan 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion src/molecules/Dropdown/Dropdown.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,19 @@ import Trigger from './DropdownTrigger';

const OutsideDiv = () => <button>bla</button>;

const setup = (flyoutContainer: boolean = true, offsetTop = 0) =>
const setup = (
flyoutContainer: boolean = true,
offsetTop = 0,
keepOpenOnClick = false
) =>
mountWithTheme(
<>
<OutsideDiv />
<Dropdown
flyoutContainer={flyoutContainer}
label="I am a dropdown"
offset={{ vertical: offsetTop }}
keepOpenOnClick={keepOpenOnClick}
>
Dropdown Content
</Dropdown>
Expand Down Expand Up @@ -63,6 +68,14 @@ describe('<Dropdown />', () => {
expect(wrapper.find(StyledMenu)).toHaveLength(0);
});

it('does not close on click of dropdown menu', () => {
const wrapper = setup(true, 0, true);
wrapper.find(Trigger).simulate('click');
expect(wrapper.find(StyledMenu)).toHaveLength(1);
wrapper.find(StyledMenu).simulate('click');
expect(wrapper.find(StyledMenu)).toHaveLength(1);
});

it.todo('closes the flyout when clicked outside');
it.todo('closes the flyout when keydown escape');
});
1 change: 1 addition & 0 deletions src/molecules/Dropdown/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ After adding the import you can use the Dropdown simply like this
| keepInViewPort | `Boolean` | | Always keep the dropdown flyout within the viewport
| data-qaid | `string` | | Optional prop for testing purposes
| id | `string` | | Default HTML id prop to identify the element
| keepOpenOnClick | `Boolean` | | Opt into keeping the dropdown open on click

### Enum

Expand Down
1 change: 1 addition & 0 deletions src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,7 @@ exports[`<Dropdown /> renders correctly 1`] = `
</OutsideDiv>
<Dropdown
flyoutContainer={true}
keepOpenOnClick={false}
label="I am a dropdown"
offset={
Object {
Expand Down
24 changes: 20 additions & 4 deletions src/molecules/Dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ interface DropdownProps extends PopperProps {
disableScrollWhenOpen?: boolean;
'data-qaid'?: string;
id?: string;
keepOpenOnClick?: boolean;
}

export const StyledMenu = styled(Menu)`
Expand All @@ -43,15 +44,26 @@ const Dropdown: React.SFC<DropdownProps> = ({
keepInViewPort,
size,
'data-qaid': qaId,
id
id,
keepOpenOnClick = false
}) => {
const [isOpen, setIsOpen] = useState(false);
const menuRef = useRef<any>();
const ref = useRef<any>();

useDisableScroll(isOpen, disableScrollWhenOpen);

useOutsideClick(ref, () => {
setIsOpen(false);
const getRef = (keepOpenOnClick: boolean) => {
if (keepOpenOnClick) {
return menuRef;
}
return ref;
};

useOutsideClick(getRef(keepOpenOnClick), () => {
if (isOpen) {
setIsOpen(false);
}
});

let width = '200px';
Expand Down Expand Up @@ -82,7 +94,11 @@ const Dropdown: React.SFC<DropdownProps> = ({
keepInViewPort={keepInViewPort}
>
{flyoutContainer ? (
<StyledMenu width={width} data-qaid={`${qaId}-flyout`}>
<StyledMenu
width={width}
ref={menuRef}
Copy link
Contributor

@jsteinb jsteinb Jan 26, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we also need to add the menuRef in the case where flyoutContainer == false? I get kind of unexpected behavior in your storybook story where flyoutContainer={false} when keepOpenOnClick is true, because it's passing menuRef into the useOutsideClick but not rendering any element with ref={menuRef}. Might be able to just do this on line 105:

<div ref={menuRef}>
  {children}
</div>

data-qaid={`${qaId}-flyout`}
>
{children}
</StyledMenu>
) : (
Expand Down
22 changes: 21 additions & 1 deletion storybook/stories/Dropdown.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,4 +77,24 @@ storiesOf('Dropdown', module)
</p>
</Dropdown>
</>
));
))
.add('Do not close on click of dropdown', () => {
const keepOpenOnClick = boolean('keepOpenOnClick', true);

return (
<>
<h1>Do not close on click of dropdown</h1>
<Dropdown
flyoutContainer={false}
offset={{ vertical: 50 }}
renderLabel={isOpen => (
<PrimaryButton>{isOpen ? 'Open' : 'Close'}</PrimaryButton>
)}
keepOpenOnClick={keepOpenOnClick}
>
<p style={{ width: '200px' }}>
I am the contents of a dropdown that stays open on click.
</p>
</Dropdown>
</>
)});