fix(dropdown): add blur

tanmen · Dec 11, 2023 · bc87d99 · bc87d99
1 parent d02bbcf
commit bc87d99
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/src/dropdowns/Dropdown/Dropdown.stories.tsx b/src/dropdowns/Dropdown/Dropdown.stories.tsx
@@ -12,19 +12,27 @@ export default {
 };
 
 const Template: Story = (args: DropdownProps) => {
-  const [open, setOpen] = useState();
-  return <Dropdown open={open} {...args}><Button onClick={() => setOpen(!open)}>Open</Button></Dropdown>;
+  const [open, setOpen] = useState<boolean>();
+  return <Dropdown
+    open={open}
+    {...args}
+    onBlur={() => setOpen(false)}
+    onClick={() => {setOpen(false)}}
+  ><Button onClick={() => setOpen(!open)}>Open</Button></Dropdown>;
 };
 
 export const Normal = Template.bind({});
 Normal.args = {
   items: [
-    'Test',
-    'Test',
-    'Test',
-    'Test',
-    'Test',
-    'Test',
-    'Test',
+    <button style={{color: 'white'}} onClick={() => console.log('Shown')}>Shown</button>,
+    <button style={{color: 'white'}} onClick={() => console.log('Murt')}>Murt</button>,
+    <button style={{color: 'white'}} onClick={() => console.log('Burckhard')}>Burckhard</button>,
+    <button style={{color: 'white'}} onClick={() => console.log('Chenoweth')}>Chenoweth</button>,
+    <button style={{color: 'white'}} onClick={() => console.log('New')}>New</button>,
+    <button style={{color: 'white'}} onClick={() => console.log('Cuthbertson')}>Cuthbertson</button>,
+    <button style={{color: 'white'}} onClick={() => console.log('Walthew')}>Walthew</button>,
+    <button style={{color: 'white'}} onClick={() => console.log('Mayberry')}>Mayberry</button>,
+    <button style={{color: 'white'}} onClick={() => console.log('Towler')}>Towler</button>,
+    <button style={{color: 'white'}} onClick={() => console.log('McCabe')}>McCabe</button>,
   ]
-}
+};
diff --git a/src/dropdowns/Dropdown/Dropdown.tsx b/src/dropdowns/Dropdown/Dropdown.tsx
@@ -1,6 +1,6 @@
 import {css} from "@emotion/react";
 import styled from "@emotion/styled";
-import {FC, MouseEventHandler, ReactNode} from "react";
+import {FC, MouseEventHandler, ReactNode, useEffect, useRef} from "react";
 import {useTheme} from "../../hooks";
 import {ThemeProp} from "../../providers";
 
@@ -11,22 +11,37 @@ export type DropdownProps = {
   className?: string;
   children: ReactNode;
   onClick?: MouseEventHandler<HTMLUListElement>
+  onBlur?: (event: MouseEvent) => Promise<unknown> | unknown
 }
 
 export const Dropdown: FC<DropdownProps> =
   ({
      open,
      align = 'right',
      items,
-     onClick = (event) => {event.stopPropagation();},
+     onClick,
+     onBlur,
      className,
      children
    }) => {
     const theme = useTheme('normal');
     const downTheme = useTheme('secondary');
-    return <Wrap className={className} tabIndex={0}>
+    const ref = useRef(null);
+
+    useEffect(() => {
+      const blur = (event: MouseEvent) => onBlur?.(event);
+      document.addEventListener("click", blur);
+      return () => {
+        document.removeEventListener("click", blur);
+      };
+    }, []);
+
+    return <Wrap className={className} tabIndex={0} onClick={e => e.stopPropagation()}>
       {children}
-      {open && <Down className="react-actors-dropdown-down" align={align} theme={theme} onClick={onClick}>
+      {open && <Down ref={ref} className="react-actors-dropdown-down" align={align} theme={theme} onClick={e => {
+        e.stopPropagation();
+        return onClick?.(e);
+      }}>
         {items.map((item, index) => <Item key={index} tabIndex={index} theme={downTheme}>{item}</Item>)}
       </Down>}
     </Wrap>;