diff --git a/packages/core/content-type-builder/admin/src/components/IconPicker/index.js b/packages/core/content-type-builder/admin/src/components/IconPicker/index.js
index 79040eede5..dd340cce5f 100644
--- a/packages/core/content-type-builder/admin/src/components/IconPicker/index.js
+++ b/packages/core/content-type-builder/admin/src/components/IconPicker/index.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Box, Flex, Icon, Typography, Searchbar, IconButton } from '@strapi/design-system';
+import React, { useState, useRef, useEffect } from 'react';
+import { Box, Flex, Icon, Typography, Searchbar, IconButton, Popover } from '@strapi/design-system';
import * as Icons from '@strapi/icons';
import { useIntl } from 'react-intl';
import { inputFocusStyle } from '@strapi/design-system';
@@ -44,8 +44,10 @@ const IconPicker = ({ intlLabel, name, onChange, value }) => {
const [search, setSearch] = useState('');
const allIcons = Object.keys(Icons);
const [icons, setIcons] = useState(allIcons);
+ const searchIconRef = useRef(null);
const SearchIcon = Icons['Search'];
+ const TrashIcon = Icons['Trash'];
const toggleSearch = () => {
setShowSearch(!showSearch);
@@ -57,9 +59,13 @@ const IconPicker = ({ intlLabel, name, onChange, value }) => {
};
const onClearSearch = () => {
+ toggleSearch();
setSearch('');
setIcons(allIcons);
- setShowSearch(false);
+ };
+
+ const removeIconSelected = () => {
+ onChange({ target: { name, value: '' } });
};
return (
@@ -68,29 +74,51 @@ const IconPicker = ({ intlLabel, name, onChange, value }) => {
{formatMessage(intlLabel)}
- {showSearch ? (
- {
- if (!search) {
- toggleSearch();
- }
- }}
- onChange={onChangeSearch}
- value={search}
- onClear={onClearSearch}
- clearLabel={formatMessage({
- id: getTrad('IconPicker.search.clear.label'),
- defaultMessage: 'Clearing the icon search',
- })}
+
+ }
+ noBorder
/>
- ) : (
- } noBorder />
+ {value && (
+ }
+ noBorder
+ />
+ )}
+
+ {showSearch && (
+
+ {
+ if (!search) {
+ toggleSearch();
+ }
+ }}
+ onChange={onChangeSearch}
+ value={search}
+ onClear={onClearSearch}
+ clearLabel={formatMessage({
+ id: getTrad('IconPicker.search.clear.label'),
+ defaultMessage: 'Clearing the icon search',
+ })}
+ >
+ {formatMessage({
+ id: getTrad('ComponentIconPicker.search.placeholder'),
+ defaultMessage: 'Search for an icon',
+ })}
+
+
)}