Fixed autoClose being mandatory (#5886)

* adds autoClose behaviour for dropdowns * replaced autoClose type, refactored logic, cleaned up tests * made autoClose optional, refactored code, improved doc naming
react-bootstrap · Jun 19, 2021 · 159ee20 · 159ee20
1 parent 5feb92e
commit 159ee20
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 20 deletions.
diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx
@@ -47,7 +47,7 @@ export interface DropdownProps
   focusFirstItemOnShow?: boolean | 'keyboard';
   onSelect?: SelectCallback;
   navbar?: boolean;
-  autoClose: boolean | 'outside' | 'inside';
+  autoClose?: boolean | 'outside' | 'inside';
 }
 
 const propTypes = {
@@ -162,7 +162,7 @@ const Dropdown: BsPrefixRefForwardingComponent<'div', DropdownProps> =
 
     const isClosingPermitted = (source: string): boolean => {
       // autoClose=false only permits close on button click
-      if (!autoClose) return source === 'click';
+      if (autoClose === false) return source === 'click';
 
       // autoClose=inside doesn't permit close on rootClose
       if (autoClose === 'inside') return source !== 'rootClose';
@@ -178,13 +178,10 @@ const Dropdown: BsPrefixRefForwardingComponent<'div', DropdownProps> =
         if (
           event.currentTarget === document &&
           (source !== 'keydown' || event.key === 'Escape')
-        ) {
+        )
           source = 'rootClose';
-        }
 
-        if (!isClosingPermitted(source)) return;
-
-        onToggle?.(nextShow, event, { source });
+        if (isClosingPermitted(source)) onToggle?.(nextShow, event, { source });
       },
     );
 

diff --git a/www/src/examples/Dropdown/AutoClose.js b/www/src/examples/Dropdown/AutoClose.js
@@ -1,15 +1,49 @@
 <>
-  {[true, 'outside', 'inside', false].map((autoClose, index) => (
-    <Dropdown autoClose={autoClose} className="d-inline mx-2">
-      <Dropdown.Toggle id={`dropdown-autoclose-${index}`}>
-        AutoClose {autoClose.toString()}
-      </Dropdown.Toggle>
-
-      <Dropdown.Menu>
-        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
-        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
-        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
-      </Dropdown.Menu>
-    </Dropdown>
-  ))}
+  <Dropdown className="d-inline mx-2">
+    <Dropdown.Toggle id="dropdown-autoclose-true">
+      Default Dropdown
+    </Dropdown.Toggle>
+
+    <Dropdown.Menu>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+
+  <Dropdown className="d-inline mx-2" autoClose="inside">
+    <Dropdown.Toggle id="dropdown-autoclose-inside">
+      Clickable Outside
+    </Dropdown.Toggle>
+
+    <Dropdown.Menu>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+
+  <Dropdown className="d-inline mx-2" autoClose="outside">
+    <Dropdown.Toggle id="dropdown-autoclose-outside">
+      Clickable Inside
+    </Dropdown.Toggle>
+
+    <Dropdown.Menu>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+
+  <Dropdown className="d-inline mx-2" autoClose={false}>
+    <Dropdown.Toggle id="dropdown-autoclose-false">
+      Manual Close
+    </Dropdown.Toggle>
+
+    <Dropdown.Menu>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+      <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
 </>;