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
) : (
- } />
+ } noBorder />
)}
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 (
-
+ {categories.map(category => (
+
+ {category}
+
+ ))}
+
);
};