Combobox clear example update

packages/core/stories/combo-box/combo-box.stories.tsx

@@ -867,7 +867,13 @@ export const ClearSelection: StoryFn<ComboBoxProps> = (args) => {
  state.toLowerCase().includes(value.trim().toLowerCase()),
  );
 
- const handleClear = () => {
+ const handleBlur = () => {
+ console.log("blur was called");
+ };
+ const handleClear = (event: any) => {
+ if (!event.currentTarget?.contains(event.relatedTarget)) {
+ event.stopPropagation();
+ }
  setValue("");
  setSelected([]);
  };
@@ -876,6 +882,7 @@ export const ClearSelection: StoryFn<ComboBoxProps> = (args) => {
  <ComboBox
  {...args}
  multiselect
+ onBlur={handleBlur}
  endAdornment={
  (value || selected.length > 0) && (
  <Button

site/docs/components/combo-box/examples.mdx

@@ -192,6 +192,7 @@ Use the `selectOnTab` prop to select the active option from the list on Tab key
 
 In order to clear all the selections, you can pass a [`Button`](../button) to the `endAdornment` prop of the `ComboBox`.
 
+**Note:** To prevent the clear selection action from triggering a blur event, you can add `event.stopPropagation()` to your event handler.
 </LivePreview>
 <LivePreview componentName="combo-box" exampleName="Bordered">
 

site/src/examples/combo-box/ClearSelection.tsx

@@ -29,14 +29,21 @@ export const ClearSelection = (): ReactElement => {
  data.toLowerCase().includes(value.trim().toLowerCase()),
  );
 
- const handleClear = () => {
+ const handleBlur = () => {
+ console.log("blur was called");
+ };
+ const handleClear = (event: any) => {
+ if (!event.currentTarget?.contains(event.relatedTarget)) {
+ event.stopPropagation();
+ }
  setValue("");
  setSelected([]);
  };
 
  return (
  <ComboBox
  multiselect
+ onBlur={handleBlur}
  selected={selected}
  onChange={handleChange}
  onSelectionChange={handleSelectionChange}