diff --git a/examples/basic.js b/examples/basic.js
index 5d5eb6c..4beca48 100644
--- a/examples/basic.js
+++ b/examples/basic.js
@@ -28,7 +28,6 @@ class Demo extends React.Component {
defaultValue="Hello World"
onSelect={this.onSelect}
onFocus={this.onFocus}
- onBlur={this.onBlur}
>
diff --git a/src/KeywordTrigger.tsx b/src/KeywordTrigger.tsx
index 6de0152..48cab1b 100644
--- a/src/KeywordTrigger.tsx
+++ b/src/KeywordTrigger.tsx
@@ -4,6 +4,7 @@ import DropdownMenu from './DropdownMenu';
import { OptionProps } from './Option';
import { Placement, Direction } from './Mentions';
+import classNames from 'classnames';
const BUILT_IN_PLACEMENTS = {
bottomRight: {
@@ -50,10 +51,11 @@ interface KeywordTriggerProps {
transitionName?: string;
children?: React.ReactElement;
getPopupContainer?: () => HTMLElement;
+ dropdownClassName?: string;
}
class KeywordTrigger extends React.Component {
- public getDropdownPrefix = () => `${this.props.prefixCls}-dropdown`;
+ public getDropdownPrefix = () => classNames(`${this.props.prefixCls}-dropdown`, this.props.dropdownClassName);
public getDropdownElement = () => {
const { options } = this.props;
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index d9995ab..1769e66 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -43,6 +43,7 @@ export interface MentionsProps extends BaseTextareaAttrs {
onFocus?: React.FocusEventHandler;
onBlur?: React.FocusEventHandler;
getPopupContainer?: () => HTMLElement;
+ dropdownClassName?: string;
}
interface MentionsState {
value: string;
@@ -363,6 +364,7 @@ class Mentions extends React.Component {
autoFocus,
notFoundContent,
getPopupContainer,
+ dropdownClassName,
...restProps
} = this.props;
@@ -416,6 +418,7 @@ class Mentions extends React.Component {
options={options}
visible
getPopupContainer={getPopupContainer}
+ dropdownClassName={dropdownClassName}
>
{measurePrefix}
diff --git a/tests/Mentions.spec.jsx b/tests/Mentions.spec.jsx
index 81496ba..4ba54dc 100644
--- a/tests/Mentions.spec.jsx
+++ b/tests/Mentions.spec.jsx
@@ -158,4 +158,10 @@ describe('Mentions', () => {
).toBe('Cat');
});
});
+
+ it('dropdownClassName should work', () => {
+ const wrapper = createMentions({ dropdownClassName: 'my-dropdown' });
+ simulateInput(wrapper, '@');
+ expect(wrapper.find('.my-dropdown').length).toBeTruthy();
+ });
});