react-component/mentions

React Mentions

rc-mentions

Screenshots

Feature

• support ie9,ie9+,chrome,firefox,safari

Keyboard

• Open mentions (focus input || focus and click)
• KeyDown/KeyUp/Enter to navigate menu

install

Usage

basic use

/**
 * inline: true
 */
import Mentions from 'rc-mentions';

const { Option } = Mentions;

var Demo = (
  <Mentions>
    <Option value="light">Light</Option>
    <Option value="bamboo">Bamboo</Option>
    <Option value="cat">Cat</Option>
  </Mentions>
);
React.render(<Demo />, container);

API

Mentions props

name	description	type	default
autoFocus	Auto get focus when component mounted	boolean	false
defaultValue	Default value	string	-
filterOption	Customize filter option logic	false | (input: string, option: OptionProps) => boolean	-
notFoundContent	Set mentions content when not match	ReactNode	'Not Found'
placement	Set popup placement	'top' | 'bottom'	'bottom'
direction	Set popup direction	'ltr' | 'rtl'	'ltr'
prefix	Set trigger prefix keyword	string | string[]	'@'
rows	Set row count	number	1
split	Set split string before and after selected mention	string	' '
validateSearch	Customize trigger search logic	(text: string, props: MentionsProps) => void	-
value	Set value of mentions	string	-
onChange	Trigger when value changed	(text: string) => void	-
onKeyDown	Trigger when user hits a key	React.KeyboardEventHandler<HTMLTextAreaElement>	-
onKeyUp	Trigger when user releases a key	React.KeyboardEventHandler<HTMLTextAreaElement>	-
onSelect	Trigger when user select the option	(option: OptionProps, prefix: string) => void	-
onSearch	Trigger when prefix hit	(text: string, prefix: string) => void	-
onFocus	Trigger when mentions get focus	React.FocusEventHandler<HTMLTextAreaElement>	-
onBlur	Trigger when mentions lose focus	React.FocusEventHandler<HTMLTextAreaElement>	-
getPopupContainer	DOM Container for suggestions	() => HTMLElement	-
autoSize	Textarea height autosize feature, can be set to true|false or an object { minRows: 2, maxRows: 6 }	boolean | object	-
onPressEnter	The callback function that is triggered when Enter key is pressed	function(e)	-
onResize	The callback function that is triggered when textarea resize	function({ width, height })	-

Methods

name	description
focus()	Component get focus
blur()	Component lose focus

Development

npm install
npm start

Example

http://localhost:9001/

online example: http://react-component.github.io/mentions/

Test Case

npm test

Coverage

npm run coverage

License

rc-mentions is released under the MIT license.

mentions's Issues

Dropdown option scroll is not working on keyboard up and down arrow key press

Demo.mp4

when dropdown has more options and scroll is present in dropdown then on pressing of up and down arrow key of keyboard then it should automatically scroll to selected option and highlight that option.
Currently option is already highlighted but auto scroll is not working to that option.

window10下无法启动

clone下来后先install 依赖，然后运行npm start ，报如下一大堆错误提示

Dynamic mention options do not always load on the first keystroke

When using asynchronously loaded data, the options are not always displayed after the first keystroke. The onSearch function is still invoked, but the options do not get displayed.

Steps to reproduce:

1. Using the story book example for this repo, on the 'dynamic' example. https://rc-mentions.react-component.now.sh/?selectedKind=rc-mentions&selectedStory=dynamic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
2. Type @a. Data is fetched for the a search, but nothing is displayed
3. Type b, data is fetched for the ab search, and results are displayed
   3a. Erase b, data is fetched for the a search, and results are displayed

After digging around a little bit in the rc-mentions code, it seems after the first keystroke, the measuring state value is still false, which might be leading to this error.

Migrate docs to dumi

project: https://github.com/orgs/react-component/projects/1/views/1

support for div tag ?

Hello.
Is there a way to add support to a div contentEditable?
The reason I'm asking this is to be able to style mentioned text while typing, as it's currently not possible to inject html in a textarea.

thanks

Pressing enter on not found causes a javascript error

1. Go to https://react-component.github.io/mentions/?selectedKind=rc-mentions&selectedStory=dynamic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fsource%2Fpanel
2. Type @dfadfdfadfdfadfdfdsfasd (or any string that won’t be found)
3. Wait until it says Not Found
4. Press enter

Initially it looks like https://github.com/react-component/mentions/blob/master/src/Mentions.tsx should check for a valid option
} else if (which === KeyCode.ENTER) { // Measure hit const option = this.getOptions()[activeIndex]; this.selectOption(option); event.preventDefault(); }

X-path for Rc-mentions

Unable to find the right x-path for the rc-mention dropdown as that is not present in DOM

Equivalent of getSuggestionsContainer prop

I am upgrading my code from the old Mention component to the new Mentions component. I am using Mentions in a position: fixed element. Instead of adding the suggestions to the root DOM element, I want to add the suggestions to the fixed container. With the previous Mention component, I could do it with getSuggestionsContainer prop. But with the new mentions component, I don't have the prop and the suggestions don't render correctly.

Is it possible to add this prop: getSuggestionsContainer?

Not working in Material ui Modal Component.

While Select the member in the dropdown then dropdown went away not populating the value.

Style each mention differently

Hey!

Is it possible to style each mention tag differently in the textarea?

For example if you have "A", "1" as suggestions in a single list, when the user selects "A" the background colour for that tag is blue, but when the user selects "1" the background colour is green

Thank you :)

Type error when custom props appear in `Mentions.Option`

This is the typescript version of official filter demo: https://codesandbox.io/s/mentions-option-type-error-fcvcpd?file=/src/App.tsx

metions的Options正在加载时，直接按下enter会选出默认值，导致bug

当onSearch的请求没有返回时，options为一个菊花默认选项。此时按下enter键会选择默认值，但是鼠标点击菊花Option是不能选择的，此处交互不一致。

Make selection key configurable

Hi,

I would like to use the component with an input-field that will submit its value on enter press.
I have to fiddle quite a bit to supress value submission on enter only when mention options are present.
This would be much easier if I could configure the selection key Mentions uses to be tab, for example.

Thanks for your great work!

[Feature Request] Add suffix property

• Hope to set suffix string when option is selected.

Unable to access textarea DOM using `ref`

After being refactored with hooks & react 18 here: 0670a18#diff-9f56b27562175c8ad14d47967036546b35e412fae8cfbe2d94a75b6b512d02d7R107

coverage not working

shadow dom 下 mentions 无法工作

Can't perform a React state update on an unmounted component.

When I press enter or select an option i get the following error.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. at Overflow (https://localhost:3000/static/js/bundle.js:192761:32) at InheritableContextProvider (https://localhost:3000/static/js/bundle.js:190509:23) at https://localhost:3000/static/js/bundle.js:189096:27 at DropdownMenu (https://localhost:3000/static/js/bundle.js:188162:62) at https://localhost:3000/static/js/bundle.js:157663:23 at div at DomWrapper (https://localhost:3000/static/js/bundle.js:191837:90) at https://localhost:3000/static/js/bundle.js:191540:32 at DomWrapper (https://localhost:3000/static/js/bundle.js:193295:90) at SingleObserver (https://localhost:3000/static/js/bundle.js:193338:24) at ResizeObserver (https://localhost:3000/static/js/bundle.js:193475:24) at https://localhost:3000/static/js/bundle.js:157242:20 at https://localhost:3000/static/js/bundle.js:157712:21 at https://localhost:3000/static/js/bundle.js:158742:34 at KeywordTrigger (https://localhost:3000/static/js/bundle.js:188261:25) at div

Code:

`<Mentions

				style={{ width: '100%' }}
				onSearch={onSearch}
			>
				{users.map((user, index) => (
					<Option value={user.handle} id={user.userId} key={index}>
						<div className='followList spaceBetween'>
							<div className='flex' style={{ width: '60%' }}>
								<ImgSrc
									userHandle={user.handle}
									userImage={user.imageUrl}
									userImageColor={user.imageColor}
									css='listImg'
									fontSize='23px'
									height='60px'
									width='53px'
								/>
								<div className='listItemText'>
									<span className='listItemSpan'>{user.handle}</span>
									{user.name && <p className='listItemP'>{user.name}</p>}
								</div>
							</div>
						</div>
					</Option>
				))}

				{users.length === 0 &&
					following.map((user, index) => (
						<Option
							value={user.followed}
							id={user.followedUserId}
							key={user.followedUserId}
						>
							<div className='followList spaceBetween'>
								<div className='flex' style={{ width: '60%' }}>
									<ImgSrc
										userHandle={user.followed}
										userImage={user.userImage}
										userImageColor={user.userImageColor}
										css='listImg'
										fontSize='23px'
										height='60px'
										width='53px'
									/>
									<div className='listItemText'>
										<span className='listItemSpan'>{user.followed}</span>
										{user.name && <p className='listItemP'>{user.name}</p>}
									</div>
								</div>
							</div>
						</Option>
					))}
			</Mentions>`

Error persists in both class and functional components.

Highlight mentioned text (e.g @Danish) while typing in textarea ?

Like above image showing the expected behavior!

How to clear the text in textarea

I am trying to clear the text in mention's textarea by javascript in React. I have tried

const textarea = document.getElementById("id");
textarea.value = "";

but this doesn't work for me.

[question] any way to use suggestions with spaces

Hi!
Can you tell about possibility to use spaces in suggestions.
I want to have vocabulary ['hi world', 'hello world', 'world'].
I was debugging code and find

mentions/src/Mentions.tsx

Line 161 in 331757d

* 2. Contains `space`

=(
I'm also used Ant.design if it helpful.

ie9下点击选中下拉待选项目，多出@符号

@列表中如果有重名用户，会有key warning

原issue链接： ant-design/ant-design#18435
在rc-Mentions中，
https://github.com/react-component/mentions/blob/master/src/DropdownMenu.tsx

<MenuItem
    key={value}
    disabled={disabled}
    className={className}
    style={style}
    onMouseEnter={() => {
        setActiveIndex(index);
    }}
>
    {children}
</MenuItem>

value直接作为key了，没有考虑value相同（即@列表重名）的情况。