fix(dropdown): now closes on clicking outside for mobile devices

anarock · Jul 23, 2018 · 5072986 · 5072986
1 parent 5cfc416
commit 5072986
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/src/components/DropDown.tsx b/src/components/DropDown.tsx
@@ -32,12 +32,17 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
     );
   };
 
-  addClickListener = () =>
-    this.props.closeOnClickOutside &&
-    document.addEventListener("mousedown", this.handleOutsideClick);
+  addClickListener = () => {
+    if (this.props.closeOnClickOutside) {
+      document.addEventListener("mousedown", this.handleOutsideClick);
+      document.addEventListener("touchstart", this.handleOutsideClick);
+    }
+  };
 
-  removeClickListener = () =>
+  removeClickListener = () => {
     document.removeEventListener("mousedown", this.handleOutsideClick);
+    document.removeEventListener("touchstart", this.handleOutsideClick);
+  };
 
   handleOutsideClick = (e: MouseEvent) => {
     if (
@@ -52,6 +57,12 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
     this.removeClickListener();
   }
 
+  componentDidMount() {
+    if (this.props.initiallyOpen) {
+      this.addClickListener();
+    }
+  }
+
   render() {
     const {
       buttonLabel,

diff --git a/src/components/Popper.tsx b/src/components/Popper.tsx
@@ -35,12 +35,15 @@ export default class extends React.PureComponent<PopperProps, PopperState> {
   };
 
   componentDidMount() {
-    if (this.props.closeOnClickOutside)
+    if (this.props.closeOnClickOutside) {
       document.addEventListener("mousedown", this.handleOutsideClick);
+      document.addEventListener("touchstart", this.handleOutsideClick);
+    }
   }
 
   componentWillUnmount() {
     document.removeEventListener("mousedown", this.handleOutsideClick);
+    document.removeEventListener("touchstart", this.handleOutsideClick);
   }
 
   render() {

diff --git a/src/components/styles/Button.styles.ts b/src/components/styles/Button.styles.ts
@@ -92,6 +92,7 @@ export const buttonStyle = css({
     border: 0,
     color: violet.base,
     minWidth: 0,
+    padding: 0,
     fontSize: 14,
     ":not(.__pebble__button__disabled):hover": {
       textDecoration: "underline"

diff --git a/src/components/typings/Input.ts b/src/components/typings/Input.ts
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 export interface InputProps {
-  type?: "text" | "date" | "password" | "number";
+  type?: "text" | "date" | "password" | "number" | "email";
   required?: boolean;
   placeholder: string;
   onChange: (text: string) => void;

diff --git a/stories/input.story.tsx b/stories/input.story.tsx
@@ -10,7 +10,7 @@ const className = css({
   width: 400
 });
 
-const type = ["text", "date", "password"];
+const type = ["text", "date", "password", "email"];
 
 storiesOf("Input", module)
   .add(