From 3ad3432a67caf774af611571f06ecd1e8ab97a4a Mon Sep 17 00:00:00 2001
From: soupette <cyril@strapi.io>
Date: Thu, 21 Oct 2021 08:59:16 +0200
Subject: [PATCH] Add combobox in CTB to create component category

Signed-off-by: soupette <cyril@strapi.io>
---
 .../components/ComponentIconPicker/index.js   |  2 +-
 .../src/components/SelectCategory/index.js    | 40 +++++++++++--------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js b/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js
index 6a8da46ca9..81d6746381 100644
--- a/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js
+++ b/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js
@@ -104,7 +104,7 @@ const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, val
               </Searchbar>
             </div>
           ) : (
-            <IconButton onClick={toggleSearch} aria-label="Edit" icon={<SearchIcon />} />
+            <IconButton onClick={toggleSearch} aria-label="Edit" icon={<SearchIcon />} noBorder />
           )}
         </Row>
         <Stack size={1}>
diff --git a/packages/core/content-type-builder/admin/src/components/SelectCategory/index.js b/packages/core/content-type-builder/admin/src/components/SelectCategory/index.js
index ebbbe61ea8..ebe8f998a1 100644
--- a/packages/core/content-type-builder/admin/src/components/SelectCategory/index.js
+++ b/packages/core/content-type-builder/admin/src/components/SelectCategory/index.js
@@ -4,39 +4,45 @@
  *
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Select, Option } from '@strapi/parts/Select';
+import { ComboboxOption, CreatableCombobox } from '@strapi/parts/Combobox';
 import useDataManager from '../../hooks/useDataManager';
 
-// FIXME replace with Creatable Combobox
 const SelectCategory = ({ error, intlLabel, name, onChange, value }) => {
   const { formatMessage } = useIntl();
   const { allComponentsCategories } = useDataManager();
+  const [categories, setCategories] = useState(allComponentsCategories);
 
   const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
   const label = formatMessage(intlLabel);
 
+  const handleChange = value => {
+    onChange({ target: { name, value, type: 'select-category' } });
+  };
+
+  const handleCreateOption = value => {
+    setCategories(prev => [...prev, value]);
+    handleChange(value);
+  };
+
   return (
-    <Select
+    <CreatableCombobox
       error={errorMessage}
-      label={label}
       id={name}
+      label={label}
       name={name}
-      onChange={value => {
-        onChange({ target: { name, value, type: 'select-category' } });
-      }}
-      value={value || ''}
+      onChange={handleChange}
+      onCreateOption={handleCreateOption}
+      value={value}
     >
-      {allComponentsCategories.map(category => {
-        return (
-          <Option key={category} value={category}>
-            {category}
-          </Option>
-        );
-      })}
-    </Select>
+      {categories.map(category => (
+        <ComboboxOption key={category} value={category}>
+          {category}
+        </ComboboxOption>
+      ))}
+    </CreatableCombobox>
   );
 };