diff --git a/components/mention/demo/controllder-simple.md b/components/mention/demo/controllder-simple.md index 4cf0c1b997b2..3d27563ba06b 100644 --- a/components/mention/demo/controllder-simple.md +++ b/components/mention/demo/controllder-simple.md @@ -21,6 +21,9 @@ class App extends React.Component { state = { value: toContentState('@afc163'), } + componentDidMount() { + this.mention.focus(); + } handleChange = (editorState) => { this.setState({ value: editorState, @@ -29,6 +32,7 @@ class App extends React.Component { render() { return ( this.mention = ele} suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']} value={this.state.value} onChange={this.handleChange} diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md index 2351b6572acc..8cb0e404da9a 100644 --- a/components/mention/index.en-US.md +++ b/components/mention/index.en-US.md @@ -51,6 +51,13 @@ When need to mention someone or something. | readOnly | Tell if the input is readonly. | boolean | false | | disabled | Tell if the input is disabled. | boolean | false | + +### Mention methods + +| Property | Description | Type | Default | +|----------|---------------|----------|--------------| +| focus | Force focus back onto the editor node. | - | - | + ### Nav props | Property | Description | Type | Default | diff --git a/components/mention/index.tsx b/components/mention/index.tsx index b975d8f7d472..c5dc6f2a398b 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -24,6 +24,7 @@ export interface MentionProps { onBlur?: Function; readOnly?: boolean; disabled?: boolean; + ref?: Function; } export interface MentionState { @@ -46,6 +47,7 @@ export default class Mention extends React.Component console.warn('Mention.toEditorState is deprecated. Use toContentState instead.'); return toEditorState(text); } + private mentionEle: any; constructor(props) { super(props); this.state = { @@ -101,6 +103,16 @@ export default class Mention extends React.Component this.props.onBlur(ev); } } + focus = () => { + this.mentionEle._editor.focus(); + } + mentionRef = ele => { + const { ref } = this.props; + if (ref) { + ref(ele); + } + this.mentionEle = ele; + } render() { const { className = '', prefixCls, loading } = this.props; const { suggestions, focus } = this.state; @@ -116,6 +128,7 @@ export default class Mention extends React.Component