fix: IconPicker unclosable on mobile

app/components/ContextMenu/index.js

@@ -20,6 +20,7 @@ type Props = {|
   children: React.Node,
   onOpen?: () => void,
   onClose?: () => void,
+  hide?: () => void,
 |};
 
 export default function ContextMenu({
@@ -68,7 +69,7 @@ export default function ContextMenu({
       </Menu>
       {(rest.visible || rest.animating) && (
         <Portal>
-          <Backdrop />
+          <Backdrop onClick={rest.hide} />
         </Portal>
       )}
     </>

app/components/IconPicker.js

@@ -35,6 +35,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import ContextMenu from "components/ContextMenu";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
@@ -188,12 +189,13 @@ const colors = [
 
 type Props = {|
   onOpen?: () => void,
+  onClose?: () => void,
   onChange: (color: string, icon: string) => void,
   icon: string,
   color: string,
 |};
 
-function IconPicker({ onOpen, icon, color, onChange }: Props) {
+function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
   const { t } = useTranslation();
   const menu = useMenuState({
     modal: true,
@@ -216,7 +218,12 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) {
           </Button>
         )}
       </MenuButton>
-      <ContextMenu {...menu} onOpen={onOpen} aria-label={t("Choose icon")}>
+      <ContextMenu
+        {...menu}
+        onOpen={onOpen}
+        onClose={onClose}
+        aria-label={t("Choose icon")}
+      >
         <Icons>
           {Object.keys(icons).map((name) => {
             return (
@@ -259,7 +266,10 @@ const Label = styled.label`
 
 const Icons = styled.div`
   padding: 16px 8px 0 16px;
+
+  ${breakpoint("tablet")`
     width: 276px;
+  `};
 `;
 
 const Button = styled(NudeButton)`
@@ -282,6 +292,11 @@ const Loading = styled(HelpText)`
 const ColorPicker = styled(TwitterPicker)`
   box-shadow: none !important;
   background: transparent !important;
+  width: auto !important;
+
+  ${breakpoint("tablet")`
+    width: 276px;
+  `};
 `;
 
 const Wrapper = styled("div")`

package.json

@@ -147,7 +147,7 @@
     "react-virtualized-auto-sizer": "^1.0.5",
     "react-waypoint": "^10.1.0",
     "react-window": "^1.8.6",
-    "reakit": "^1.3.8",
+    "reakit": "^1.3.10",
     "regenerator-runtime": "^0.13.7",
     "rich-markdown-editor": "^11.17.10",
     "semver": "^7.3.2",

yarn.lock

@@ -12077,35 +12077,35 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
-reakit-system@^0.15.1:
+reakit-system@^0.15.2:
-  version "0.15.1"
+  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/reakit-system/-/reakit-system-0.15.1.tgz#bf5cc7a03f60a817373bc9cbb4a689c1f4100547"
+  resolved "https://registry.yarnpkg.com/reakit-system/-/reakit-system-0.15.2.tgz#a485fab84b3942acbed6212c3b56a6ef8611c457"
-  integrity sha512-PkqfAyEohtcEu/gUvKriCv42NywDtUgvocEN3147BI45dOFAB89nrT7wRIbIcKJiUT598F+JlPXAZZVLWhc1Kg==
+  integrity sha512-TvRthEz0DmD0rcJkGamMYx+bATwnGNWJpe/lc8UV2Js8nnPvkaxrHk5fX9cVASFrWbaIyegZHCWUBfxr30bmmA==
   dependencies:
-    reakit-utils "^0.15.1"
+    reakit-utils "^0.15.2"
 
-reakit-utils@^0.15.1:
+reakit-utils@^0.15.2:
-  version "0.15.1"
+  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.15.1.tgz#797f0a43f6a1dbc22d161224d5d2272e287dbfe3"
+  resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.15.2.tgz#b4d5836e534576bfd175171541d43182ad97f2d2"
-  integrity sha512-6cZgKGvOkAMQgkwU9jdYbHfkuIN1Pr+vwcB19plLvcTfVN0Or10JhIuj9X+JaPZyI7ydqTDFaKNdUcDP69o/+Q==
+  integrity sha512-i/RYkq+W6hvfFmXw5QW7zvfJJT/K8a4qZ0hjA79T61JAFPGt23DsfxwyBbyK91GZrJ9HMrXFVXWMovsKBc1qEQ==
 
-reakit-warning@^0.6.1:
+reakit-warning@^0.6.2:
-  version "0.6.1"
+  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/reakit-warning/-/reakit-warning-0.6.1.tgz#dba33bb8866aebe30e67ac433ead707d16d38a36"
+  resolved "https://registry.yarnpkg.com/reakit-warning/-/reakit-warning-0.6.2.tgz#9c346ae483eb1f284f2088653f90cabd26dbee56"
-  integrity sha512-poFUV0EyxB+CcV9uTNBAFmcgsnR2DzAbOTkld4Ul+QOKSeEHZB3b3+MoZQgcYHmbvG19Na1uWaM7ES+/Eyr8tQ==
+  integrity sha512-z/3fvuc46DJyD3nJAUOto6inz2EbSQTjvI/KBQDqxwB0y02HDyeP8IWOJxvkuAUGkWpeSx+H3QWQFSNiPcHtmw==
   dependencies:
-    reakit-utils "^0.15.1"
+    reakit-utils "^0.15.2"
 
-reakit@^1.3.8:
+reakit@^1.3.10:
-  version "1.3.8"
+  version "1.3.10"
-  resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.3.8.tgz#717e1a3b7cc6da803362a0edc2c55d2b6a001baf"
+  resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.3.10.tgz#9b04efb8962cc17ecaffa31bae0396940177d431"
-  integrity sha512-8SVejx6FUaFi2+Q9eXoDAd4wWi/xAn6v8JgXH8x2xnzye8pb6v5bYvegACVpYVZnrS5w/JUgMTGh1Xy8MkkPww==
+  integrity sha512-HxHtnegMDwidGU4Ik/fKTZ3coihf4nKeycs0QSIFWcau77qL5wL6xnqZrAxcjjDDPOIANct3LxTiAlf+qGLOlw==
   dependencies:
     "@popperjs/core" "^2.5.4"
     body-scroll-lock "^3.1.5"
-    reakit-system "^0.15.1"
+    reakit-system "^0.15.2"
-    reakit-utils "^0.15.1"
+    reakit-utils "^0.15.2"
-    reakit-warning "^0.6.1"
+    reakit-warning "^0.6.2"
 
 rechoir@^0.6.2:
   version "0.6.2"