From 873f810099fc29df59c0bfac026e2e36c50d74b8 Mon Sep 17 00:00:00 2001
From: soupette <cyril.lpz@gmail.com>
Date: Thu, 16 Apr 2020 11:32:24 +0200
Subject: [PATCH] Fixes #5771

Signed-off-by: soupette <cyril.lpz@gmail.com>
---
 .../components/ComponentIconPicker/index.js   | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentIconPicker/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentIconPicker/index.js
index dc80bc22fb..3b573731a0 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentIconPicker/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentIconPicker/index.js
@@ -1,4 +1,5 @@
-import React, { createRef, useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
+import { useClickAwayListener } from '@buffetjs/hooks';
 import { Label, ErrorMessage } from '@buffetjs/styles';
 import { AutoSizer, Collection } from 'react-virtualized';
 import PropTypes from 'prop-types';
@@ -21,13 +22,18 @@ const ComponentIconPicker = ({ error, isCreating, label, name, onChange, value }
     // Edition
     return !allComponentsIconAlreadyTaken.filter(icon => icon !== originalIcon).includes(ico);
   });
-  const ref = createRef();
+  const ref = useRef();
+  const searchWrapperRef = useRef();
   const [originalIcon] = useState(value);
   const [showSearch, setShowSearch] = useState(false);
   const [search, setSearch] = useState('');
   const [icons, setIcons] = useState(initialIcons);
   const toggleSearch = () => setShowSearch(prev => !prev);
 
+  useClickAwayListener(searchWrapperRef, () => {
+    setShowSearch(false);
+  });
+
   useEffect(() => {
     if (showSearch && ref.current) {
       ref.current.focus();
@@ -58,6 +64,11 @@ const ComponentIconPicker = ({ error, isCreating, label, name, onChange, value }
     };
   };
 
+  const handleChangeSearch = ({ target: { value } }) => {
+    setSearch(value);
+    setIcons(() => initialIcons.filter(icon => icon.includes(value)));
+  };
+
   return (
     <Wrapper error={error !== null}>
       <div className="search">
@@ -69,18 +80,10 @@ const ComponentIconPicker = ({ error, isCreating, label, name, onChange, value }
             <FontAwesomeIcon icon="search" />
           </button>
         ) : (
-          <SearchWrapper>
+          <SearchWrapper ref={searchWrapperRef}>
             <FontAwesomeIcon icon="search" />
             <button onClick={toggleSearch} type="button" />
-            <Search
-              ref={ref}
-              onChange={({ target: { value } }) => {
-                setSearch(value);
-                setIcons(() => initialIcons.filter(icon => icon.includes(value)));
-              }}
-              value={search}
-              placeholder="Search…"
-            />
+            <Search ref={ref} onChange={handleChangeSearch} value={search} placeholder="Search…" />
             <button
               onClick={() => {
                 setSearch('');