diff --git a/README.md b/README.md index 0312549..0776f39 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,7 @@ More examples can be found [here ↗](https://react-multi-select-component.pages | `isLoading` | show spinner on select | `boolean` | `false` | | `shouldToggleOnHover` | toggle dropdown on hover option | `boolean` | `false` | | `overrideStrings` | [localization ↗](stories/recipes/localization.stories.mdx) | `object` | | +| `onBlur` | onBlur callback | `function` | | | `onChange` | onChange callback | `function` | | | `disabled` | disable dropdown | `boolean` | `false` | | `disableSearch` | hide search textbox | `boolean` | `false` | diff --git a/src/multi-select/dropdown.tsx b/src/multi-select/dropdown.tsx index bbe8471..02764eb 100644 --- a/src/multi-select/dropdown.tsx +++ b/src/multi-select/dropdown.tsx @@ -24,6 +24,7 @@ const Dropdown = () => { isLoading, disabled, onChange, + onBlur, labelledBy, value, isOpen, @@ -90,6 +91,7 @@ const Dropdown = () => { if (!e.currentTarget.contains(e.relatedTarget) && isInternalExpand) { setHasFocus(false); setExpanded(false); + onBlur?.(e); } }; diff --git a/stories/basic.stories.tsx b/stories/basic.stories.tsx index db34883..ea41d77 100644 --- a/stories/basic.stories.tsx +++ b/stories/basic.stories.tsx @@ -24,6 +24,9 @@ export const ExampleDefault = () => { value={selected} disabled={boolean("disabled", false)} onChange={setSelected} + onBlur={() => { + console.debug("input blurred"); + }} onMenuToggle={(s) => { console.debug("Select Toggle: ", s); }}