`). This method should **always** return a unique string, otherwise, you have to use object notation and specify your own `key` or return object from `dataProvider` with `key` property.
## [Example of usage](http://react-textarea-autocomplete.surge.sh/)
`create-react-app example && cd example && yarn add @jukben/emoji-search @webscopeio/react-textarea-autocomplete`
@@ -242,7 +242,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
| [
Jakub BeneΕ‘](https://jukben.cz)
[π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jukben "Code") [π](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jukben "Documentation") [π¨](#design-jukben "Design") [π€](#ideas-jukben "Ideas, Planning, & Feedback") | [
Andrey Taktaev](https://github.com/JokerNN)
[π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=JokerNN "Code") | [
Marcin LichwaΕa](https://github.com/marcinlichwala)
[π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=marcinlichwala "Code") [π](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=marcinlichwala "Documentation") | [
Davidson Nascimento](https://github.com/davidsonsns)
[π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=davidsonsns "Code") | [
KajMagnus](http://www.effectivediscussions.org/)
[π](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Akajmagnus "Bug reports") [π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=kajmagnus "Code") | [
JΓ‘n VorΔΓ‘k](https://twitter.com/janvorcak)
[π](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Ajvorcak "Bug reports") [π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jvorcak "Code") | [
Mateusz BurzyΕski](https://github.com/Andarist)
[π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=Andarist "Code") [π¦](#platform-Andarist "Packaging/porting to new platform") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
-| [
Deepak Pai](https://github.com/debugpai2)
[π](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Adebugpai2 "Bug reports") [π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=debugpai2 "Code") | [
Aleck Landgraf](http://aleck.me)
[π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=alecklandgraf "Code") |
+| [
Deepak Pai](https://github.com/debugpai2)
[π](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Adebugpai2 "Bug reports") [π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=debugpai2 "Code") | [
Aleck Landgraf](http://aleck.me)
[π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=alecklandgraf "Code") | [
Serguei Okladnikov](https://github.com/oklas)
[π](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Aoklas "Bug reports") [π»](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=oklas "Code") |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
diff --git a/__tests__/__snapshots__/index.spec.js.snap b/__tests__/__snapshots__/index.spec.js.snap
index ceae2b0..1aa9f4b 100644
--- a/__tests__/__snapshots__/index.spec.js.snap
+++ b/__tests__/__snapshots__/index.spec.js.snap
@@ -358,6 +358,22 @@ exports[`object-based items with keys match the snapshot of dropdown, list, and
`;
+exports[`object-based items without keys and custom unique generator match the snapshot 1`] = `
+
+
+
+`;
+
exports[`string-based items w/o output fn match match the snapshot 1`] = `
{
expect(rta.find('textarea').node.value).toBe('some test ___happy_face___ ');
});
});
+
+describe('object-based items without keys and custom unique generator', () => {
+ const mockedChangeFn = jest.fn();
+ const mockedSelectFn = jest.fn();
+ const mockedCaretPositionChangeFn = jest.fn();
+
+ const rtaComponent = (
+ ({
+ key: 10 + item.value,
+ text: `___${item.text}___`,
+ caretPosition: 'next',
+ }),
+ dataProvider: () => [
+ { value: 1, label: ':)', text: 'happy_face' },
+ { value: 2, label: ':(', text: 'sad_face' },
+ { value: 3, label: ':|', text: 'sad_face' },
+ ],
+ component: SmileItemComponent,
+ },
+ }}
+ />
+ );
+ const rta = mount(rtaComponent);
+
+ it('match the snapshot', () => {
+ expect(shallow(rtaComponent)).toMatchSnapshot();
+ });
+
+ it('After the trigger was typed, it should appear list of options', () => {
+ rta
+ .find('textarea')
+ .simulate('change', { target: { value: 'some test :a' } });
+ expect(rta.find('.rta__autocomplete')).toHaveLength(1);
+ });
+
+ it('should display all items', () => {
+ expect(rta.find('.rta__autocomplete .rta__list .rta__item')).toHaveLength(
+ 3
+ );
+ });
+
+ it('should generate unique value by the output generator', () => {
+ const items = rta.find(Item);
+ expect(items.at(0).key()).toEqual("11");
+ expect(items.at(1).key()).toEqual("12");
+ expect(items.at(2).key()).toEqual("13");
+ });
+});
diff --git a/src/List.jsx b/src/List.jsx
index f077c7a..6106e94 100644
--- a/src/List.jsx
+++ b/src/List.jsx
@@ -51,8 +51,13 @@ export default class List extends React.Component {
};
getId = (item: textToReplaceType | string): string => {
+ const textToReplace = this.props.getTextToReplace(item);
+ if (textToReplace.key) {
+ return textToReplace.key;
+ }
+
if (typeof item === 'string' || !item.key) {
- return this.props.getTextToReplace(item).text;
+ return textToReplace.text;
}
return item.key;