diff --git a/README.md b/README.md
index d42e9ae..32744ee 100644
--- a/README.md
+++ b/README.md
@@ -235,6 +235,13 @@ Provides you with an object to replace the default icons used.
undefined
+
+
clearSearchClick?: function
+
+The callback function which will be triggered on clicking close icon inside search box
+
+
undefined
+
@@ -257,6 +264,7 @@ the below code shows all the overridable styles:
SearchIcon?: {...styles},
ArrowIcon?: {...styles},
HiddenChipsIndicator?: {...styles},
+ ClearSearchIcon?: {...styles},
SelectedMenuItem?: (id) => ({...styles}),
UnSelectedMenuItem?: (id) => ({...styles}),
ChipComponent?: (id) => ({...styles}),
@@ -270,9 +278,10 @@ To customize the style of various components, you can use the following prop nam
- `Container`: Overrides the style of the multi-selection UI container.
- `CheckedIcon`: Overrides the style of the checked icon.
- `ChipCloseIcon`: Overrides the style of the close icon within the chip.
+- `ClearSearchIcon`: Overrides the style of the close icon within the search box.
- `HelperText`: Overrides the style of the helper text.
- `HiddenChipsIndicator`: Overrides the style of the bubble indicating the number of hidden chips if the thresholdForBubble prop has a value.
-- `InputBox`: Overrides the style of the box containing the chips and search bar.
+- `InputBox`: Overrides the style of the box containing the chips and search bar. Can be used to style the placeholder if the search is hidden.
- `SearchIcon`: Overrides the style of the search icon.
- `SearchComponent`: Overrides the styles of the search component.
- `UnCheckedIcon`: Overrides the style of the unchecked box.
@@ -292,10 +301,11 @@ The following code displays the icons that can be customized
```
@@ -303,4 +313,5 @@ The following code displays the icons that can be customized
- `Arrow` - Overrides the down arrow(right)
- `ChipClose` - Overrides the chip close icon
- `Checked` - Overrides the checkbox checked icon
+- `ClearSearch` - Overrides the close icon inside search box
- `Search` - Overrides the search icon
diff --git a/src/lib/multi-select/chips.tsx b/src/lib/multi-select/chips.tsx
index ce80703..291ef3f 100644
--- a/src/lib/multi-select/chips.tsx
+++ b/src/lib/multi-select/chips.tsx
@@ -2,7 +2,7 @@ import React, { MouseEvent, useMemo } from "react";
import closeIcon from "../../assets/x.svg";
import { ChipListPropType, OptionType } from "./types";
import { Elements, ElementsWithCallableStyle } from "./constants";
-import { getStyles } from "./utils/utils";
+import { getStyles, renderAsImage } from "./utils/utils";
import classes from "./styles.module.scss";
const Chips = (props: ChipListPropType): JSX.Element => {
@@ -50,12 +50,14 @@ const Chips = (props: ChipListPropType): JSX.Element => {
onClick(e, item.id)
}
>
-
+ {renderAsImage(icon) ?
+ :
+ icon}
)
diff --git a/src/lib/multi-select/constants.ts b/src/lib/multi-select/constants.ts
index 9759e1e..cfbde06 100644
--- a/src/lib/multi-select/constants.ts
+++ b/src/lib/multi-select/constants.ts
@@ -15,6 +15,7 @@ export enum Elements {
SearchIcon = "SearchIcon",
ArrowIcon = "ArrowIcon",
HiddenChipsIndicator = "HiddenChipsIndicator",
+ ClearSearchIcon = "ClearSearchIcon"
}
export enum ElementsWithCallableStyle {
diff --git a/src/lib/multi-select/menuItems.tsx b/src/lib/multi-select/menuItems.tsx
index 9a8e3f8..0b2d3e8 100644
--- a/src/lib/multi-select/menuItems.tsx
+++ b/src/lib/multi-select/menuItems.tsx
@@ -1,5 +1,6 @@
-import React from "react";
-import { getStyles } from "./utils/utils";
+import React, { useMemo } from "react";
+import CheckMark from "../../assets/CheckBox.svg";
+import { getStyles, renderAsImage } from "./utils/utils";
import { ModalProps, OptionType } from "./types";
import {
DEFAULT_EMPTY_LIST_MESSAGE,
@@ -22,6 +23,9 @@ const OptionListingModal = (props: ModalProps): JSX.Element => {
onOptionClick,
styles = {}
} = props;
+
+ const showDefault = useMemo(()=> renderAsImage(icon), [icon]);
+
return (
<>
{list?.length && (list.length !== selectedIds.length || !hideSelected)
@@ -31,7 +35,7 @@ const OptionListingModal = (props: ModalProps): JSX.Element => {
!hideSelected) && (