diff --git a/src/components/Popups/ReplyField/ItemList.tsx b/src/components/Popups/ReplyField/ItemList.tsx
index 3dd104d0d..0893186f9 100644
--- a/src/components/Popups/ReplyField/ItemList.tsx
+++ b/src/components/Popups/ReplyField/ItemList.tsx
@@ -1,13 +1,13 @@
 import React, { SyntheticEvent } from 'react';
 import noop from 'lodash/noop';
+import uniqueId from 'lodash/uniqueId';
 import ItemRow from './ItemRow';
-import { Collaborator } from '../../../@types';
 import './ItemList.scss';
 
 export type Props = {
     activeItemIndex?: number;
     itemRowAs?: JSX.Element;
-    items: Collaborator[];
+    items: Record<string, unknown>[];
     onSelect: (index: number, event: React.SyntheticEvent) => void;
     setActiveItemIndex?: (index: number) => void;
 };
@@ -21,11 +21,11 @@ const ItemList = ({
     ...rest
 }: Props): JSX.Element => {
     return (
-        <ul role="listbox" {...rest}>
+        <ul data-testid="ba-ItemList" role="listbox" {...rest}>
             {items.map((item, index) =>
                 React.cloneElement(itemRowAs, {
                     ...item,
-                    key: item.id,
+                    key: item.id ? String(item.id) : uniqueId(),
                     className: 'ba-ItemList-row',
                     isActive: index === activeItemIndex,
                     onClick: (event: SyntheticEvent) => {
diff --git a/src/components/Popups/ReplyField/ItemRow.scss b/src/components/Popups/ReplyField/ItemRow.scss
new file mode 100644
index 000000000..09300b52b
--- /dev/null
+++ b/src/components/Popups/ReplyField/ItemRow.scss
@@ -0,0 +1,7 @@
+@import '~box-ui-elements/es/styles/variables';
+
+.ba-DefaultItemRow-email {
+    color: $bdl-gray-62;
+    font-size: 11px;
+    line-height: 13px;
+}
diff --git a/src/components/Popups/ReplyField/ItemRow.tsx b/src/components/Popups/ReplyField/ItemRow.tsx
new file mode 100644
index 000000000..8be3ab436
--- /dev/null
+++ b/src/components/Popups/ReplyField/ItemRow.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import DatalistItem from 'box-ui-elements/es/components/datalist-item';
+import { UserMini, GroupMini } from '../../../@types';
+import './ItemRow.scss';
+
+export type Props = {
+    id?: string;
+    item?: UserMini | GroupMini;
+    name?: string;
+};
+
+const DefaultItemRow = ({ item, ...rest }: Props): JSX.Element | null => {
+    if (!item || !item.name) {
+        return null;
+    }
+
+    return (
+        <DatalistItem {...rest}>
+            <div className="ba-DefaultItemRow-name" data-testid="ba-DefaultItemRow-name">
+                {item.name}
+            </div>
+            {'email' in item && (
+                <div className="ba-DefaultItemRow-email" data-testid="ba-DefaultItemRow-email">
+                    {item.email}
+                </div>
+            )}
+        </DatalistItem>
+    );
+};
+
+export default DefaultItemRow;
diff --git a/src/components/Popups/ReplyField/PopupList.tsx b/src/components/Popups/ReplyField/PopupList.tsx
index c581adca2..e73126c62 100644
--- a/src/components/Popups/ReplyField/PopupList.tsx
+++ b/src/components/Popups/ReplyField/PopupList.tsx
@@ -4,14 +4,13 @@ import { FormattedMessage } from 'react-intl';
 import ItemList from './ItemList';
 import messages from '../messages';
 import PopupBase from '../PopupBase';
-import { Collaborator } from '../../../@types';
 import { Options, PopupReference } from '../Popper';
 import './PopupList.scss';
 
 export type Props = {
     activeItemIndex?: number;
     itemRowAs?: JSX.Element;
-    items: Collaborator[];
+    items: Record<string, unknown>[];
     onSelect: (index: number, event: React.SyntheticEvent) => void;
     options?: Partial<Options>;
     reference: PopupReference;
@@ -36,18 +35,16 @@ const defaultOptions: Partial<Options> = {
     placement: 'bottom-start',
 };
 
-const PopupList = ({ items, reference, options, ...rest }: Props): JSX.Element => {
-    return (
-        <PopupBase className="ba-PopupList" options={{ ...defaultOptions, ...options }} reference={reference}>
-            {isEmpty(items) ? (
-                <div className="ba-PopupList-prompt">
-                    <FormattedMessage {...messages.popupListPrompt} />
-                </div>
-            ) : (
-                <ItemList items={items} {...rest} />
-            )}
-        </PopupBase>
-    );
-};
+const PopupList = ({ items, reference, options, ...rest }: Props): JSX.Element => (
+    <PopupBase className="ba-PopupList" options={{ ...defaultOptions, ...options }} reference={reference}>
+        {isEmpty(items) ? (
+            <div className="ba-PopupList-prompt">
+                <FormattedMessage {...messages.popupListPrompt} />
+            </div>
+        ) : (
+            <ItemList items={items} {...rest} />
+        )}
+    </PopupBase>
+);
 
 export default PopupList;
diff --git a/src/components/Popups/ReplyField/ReplyField.tsx b/src/components/Popups/ReplyField/ReplyField.tsx
index 46eca9b16..07d49ce95 100644
--- a/src/components/Popups/ReplyField/ReplyField.tsx
+++ b/src/components/Popups/ReplyField/ReplyField.tsx
@@ -9,7 +9,7 @@ import { ContentState, DraftHandleValue, Editor, EditorState, SelectionState } f
 import PopupList from './PopupList';
 import withMentionDecorator from './withMentionDecorator';
 import { Collaborator } from '../../../@types';
-import { State as PopperState, VirtualElement } from '../Popper';
+import { VirtualElement } from '../Popper';
 import './ReplyField.scss';
 
 export type Mention = {
@@ -98,7 +98,7 @@ export default class ReplyField extends React.Component<Props, State> {
             }
 
             const isNameMatch = fuzzySearch(trimmedQuery, item.name, 0);
-            const isEmailMatch = 'email' in item && fuzzySearch(trimmedQuery, item.email, 0);
+            const isEmailMatch = 'email' in item && fuzzySearch(trimmedQuery, item?.email, 0);
 
             return isNameMatch || isEmailMatch;
         });
@@ -140,18 +140,6 @@ export default class ReplyField extends React.Component<Props, State> {
         this.setState({ popupReference: activeMention ? this.getVirtualElement(activeMention) : null });
     };
 
-    handleFirstUpdate = (state: Partial<PopperState>): void => {
-        const { x, y } = state.rects?.reference || {};
-
-        // sometimes inner popper position is wrong due to parent popper position change, like zoom in/out
-        // the inner popper position should always be positive (bottom-right)
-        // so if position is negative after first positioning,
-        // we re-calculate virtualElement to re-position inner popper
-        if ((x && x < 0) || (y && y < 0)) {
-            this.updatePopupReference();
-        }
-    };
-
     handleChange = (nextEditorState: EditorState): void => {
         const { onChange } = this.props;
 
@@ -164,12 +152,13 @@ export default class ReplyField extends React.Component<Props, State> {
 
     handleSelect = (index: number): void => {
         const { editorState } = this.state;
-        const collaborators = this.getCollaborators(getActiveMentionForEditorState(editorState));
 
         const activeMention = getActiveMentionForEditorState(editorState);
+        const collaborators = this.getCollaborators(activeMention);
         const editorStateWithLink = addMention(editorState, activeMention, collaborators[index]);
 
         this.handleChange(editorStateWithLink);
+        this.setPopupListActiveItem(0);
     };
 
     focusEditor = (): void => {
@@ -193,41 +182,45 @@ export default class ReplyField extends React.Component<Props, State> {
 
     setPopupListActiveItem = (index: number): void => this.setState({ activeItemIndex: index });
 
-    handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): DraftHandleValue => {
-        const { activeItemIndex, editorState, popupReference } = this.state;
-        const collaborators = this.getCollaborators(getActiveMentionForEditorState(editorState));
+    handleReturn = (event: React.KeyboardEvent): DraftHandleValue => {
+        const { activeItemIndex, popupReference } = this.state;
 
         if (!popupReference) {
             return 'not-handled';
         }
 
-        switch (event.key) {
-            case 'ArrowDown':
-                if (!collaborators.length) {
-                    break;
-                }
-                this.stopDefaultEvent(event);
-                this.setPopupListActiveItem(activeItemIndex === collaborators.length - 1 ? 0 : activeItemIndex + 1);
-                break;
-            case 'ArrowUp':
-                if (!collaborators.length) {
-                    break;
-                }
-                this.stopDefaultEvent(event);
-                this.setPopupListActiveItem(activeItemIndex === 0 ? collaborators.length - 1 : activeItemIndex - 1);
-                break;
-            case 'Enter':
-                this.stopDefaultEvent(event);
-                this.handleSelect(activeItemIndex);
-                this.setPopupListActiveItem(0);
-                return 'handled';
-            default:
-            // don't stop default event if not above keys
+        this.stopDefaultEvent(event);
+        this.handleSelect(activeItemIndex);
+
+        return 'handled';
+    };
+
+    handleArrowHelper = (
+        event: React.KeyboardEvent,
+        getNextIndex: (activeItemIndex: number, itemsLength: number) => number,
+    ): void => {
+        const { activeItemIndex, editorState, popupReference } = this.state;
+        const collaborators = this.getCollaborators(getActiveMentionForEditorState(editorState));
+
+        if (!popupReference || !collaborators.length) {
+            return;
         }
 
-        return 'not-handled';
+        this.stopDefaultEvent(event);
+        const nextIndex = getNextIndex(activeItemIndex, collaborators.length);
+        this.setPopupListActiveItem(nextIndex);
     };
 
+    handleDownArrow = (event: React.KeyboardEvent): void =>
+        this.handleArrowHelper(event, (activeItemIndex: number, itemsLength: number) =>
+            activeItemIndex === itemsLength - 1 ? 0 : activeItemIndex + 1,
+        );
+
+    handleUpArrow = (event: React.KeyboardEvent): void =>
+        this.handleArrowHelper(event, (activeItemIndex: number, itemsLength: number) =>
+            activeItemIndex === 0 ? itemsLength - 1 : activeItemIndex - 1,
+        );
+
     render(): JSX.Element {
         const { className, isDisabled, itemRowAs, placeholder, ...rest } = this.props;
         const { activeItemIndex, editorState, popupReference } = this.state;
@@ -238,10 +231,10 @@ export default class ReplyField extends React.Component<Props, State> {
                     {...rest}
                     ref={this.editorRef}
                     editorState={editorState}
-                    handleReturn={this.handleKeyDown}
+                    handleReturn={this.handleReturn}
                     onChange={this.handleChange}
-                    onDownArrow={this.handleKeyDown}
-                    onUpArrow={this.handleKeyDown}
+                    onDownArrow={this.handleDownArrow}
+                    onUpArrow={this.handleUpArrow}
                     placeholder={placeholder}
                     readOnly={isDisabled}
                     stripPastedStyles
@@ -254,7 +247,6 @@ export default class ReplyField extends React.Component<Props, State> {
                         itemRowAs={itemRowAs}
                         items={this.getCollaborators(getActiveMentionForEditorState(editorState))}
                         onSelect={this.handleSelect}
-                        options={{ onFirstUpdate: this.handleFirstUpdate }}
                         reference={popupReference}
                         setActiveItemIndex={this.setPopupListActiveItem}
                     />
diff --git a/src/components/Popups/ReplyField/__tests__/ItemList-test.tsx b/src/components/Popups/ReplyField/__tests__/ItemList-test.tsx
index ca91c224d..40e39e6ce 100644
--- a/src/components/Popups/ReplyField/__tests__/ItemList-test.tsx
+++ b/src/components/Popups/ReplyField/__tests__/ItemList-test.tsx
@@ -14,74 +14,38 @@ describe('components/Popups/ReplyField/ItemList', () => {
     const getWrapper = (props = {}): ShallowWrapper => shallow(<ItemList {...defaults} {...props} />);
 
     describe('render()', () => {
-        test('should render ul with correct props', () => {
-            const wrapper = getWrapper();
-
-            expect(wrapper.find('ul').props()).toMatchObject({
-                role: 'listbox',
-            });
-            expect(wrapper.find('ul').children()).toHaveLength(2);
-        });
-
-        test('should render child with correct props', () => {
-            const wrapper = getWrapper();
-
-            expect(
-                wrapper
-                    .find('ul')
-                    .childAt(0)
-                    .prop('className'),
-            ).toEqual('ba-ItemList-row');
-        });
-
-        test('should activate child at activeItemIndex', () => {
+        test('should render elements with correct props', () => {
             const wrapper = getWrapper({ activeItemIndex: 1 });
 
-            expect(
-                wrapper
-                    .find('ul')
-                    .childAt(0)
-                    .prop('isActive'),
-            ).toEqual(false);
-            expect(
-                wrapper
-                    .find('ul')
-                    .childAt(1)
-                    .prop('isActive'),
-            ).toEqual(true);
-        });
-
-        test('should trigger onSelect when click', () => {
-            const wrapper = getWrapper();
-            wrapper
-                .find('ul')
-                .childAt(0)
-                .simulate('click', 'event');
+            const itmeList = wrapper.find('[data-testid="ba-ItemList"]');
+            const firstChild = itmeList.childAt(0);
+            const secondChild = itmeList.childAt(1);
 
-            expect(defaults.onSelect).toBeCalledWith(0, 'event');
+            expect(itmeList.props()).toMatchObject({
+                role: 'listbox',
+            });
+            expect(itmeList.children()).toHaveLength(2);
+            expect(firstChild.prop('className')).toEqual('ba-ItemList-row');
+            expect(firstChild.prop('isActive')).toEqual(false);
+            expect(secondChild.prop('isActive')).toEqual(true);
         });
 
-        test('should call preventDefault when mouse down', () => {
-            const wrapper = getWrapper();
+        test('should trigger events', () => {
+            const mockSetIndex = jest.fn();
             const mockEvent = {
                 preventDefault: jest.fn(),
             };
-            wrapper
-                .find('ul')
-                .childAt(0)
-                .simulate('mousedown', mockEvent);
-
-            expect(mockEvent.preventDefault).toBeCalled();
-        });
 
-        test('should call setActiveItemIndex when mouse enter', () => {
-            const mockSetIndex = jest.fn();
             const wrapper = getWrapper({ setActiveItemIndex: mockSetIndex });
-            wrapper
-                .find('ul')
-                .childAt(0)
-                .simulate('mouseenter');
+            const firstChild = wrapper.find('[data-testid="ba-ItemList"]').childAt(0);
+
+            firstChild.simulate('click', mockEvent);
+            expect(defaults.onSelect).toBeCalledWith(0, mockEvent);
+
+            firstChild.simulate('mousedown', mockEvent);
+            expect(mockEvent.preventDefault).toBeCalled();
 
+            firstChild.simulate('mouseenter');
             expect(mockSetIndex).toBeCalledWith(0);
         });
     });
diff --git a/src/components/Popups/ReplyField/__tests__/ItemRow-test.tsx b/src/components/Popups/ReplyField/__tests__/ItemRow-test.tsx
new file mode 100644
index 000000000..4883a522c
--- /dev/null
+++ b/src/components/Popups/ReplyField/__tests__/ItemRow-test.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import DatalistItem from 'box-ui-elements/es/components/datalist-item';
+import ItemRow, { Props } from '../ItemRow';
+
+describe('components/Popups/ReplyField/DefaultItemRow', () => {
+    const defaults: Props = {
+        id: 'testid',
+        item: { email: 'test@box.com', id: 'testid', name: 'testname', type: 'user' },
+        name: 'testname',
+    };
+
+    const getWrapper = (props = {}): ShallowWrapper => shallow(<ItemRow {...defaults} {...props} />);
+
+    describe('render()', () => {
+        test('should render DatalistItem with correct props', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.find(DatalistItem).props()).toMatchObject({
+                id: 'testid',
+                name: 'testname',
+            });
+        });
+
+        test('should not render anything if no item', () => {
+            const wrapper = getWrapper({ item: null });
+
+            expect(wrapper.exists(DatalistItem)).toBeFalsy();
+        });
+
+        test('should not render anything if no item name', () => {
+            const wrapper = getWrapper({ item: {} });
+
+            expect(wrapper.exists(DatalistItem)).toBeFalsy();
+        });
+
+        test('should render item name and email', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.find('[data-testid="ba-DefaultItemRow-name"]').text()).toBe('testname');
+            expect(wrapper.find('[data-testid="ba-DefaultItemRow-email"]').text()).toBe('test@box.com');
+        });
+
+        test('should not render email if item has no email', () => {
+            const wrapper = getWrapper({ item: { id: 'testid', name: 'testname', type: 'group' } });
+
+            expect(wrapper.exists('[data-testid="ba-DefaultItemRow-email"]')).toBeFalsy();
+        });
+    });
+});
diff --git a/src/components/Popups/ReplyField/__tests__/MentionItem-test.tsx b/src/components/Popups/ReplyField/__tests__/MentionItem-test.tsx
index 13e61ee88..a8b5877dc 100644
--- a/src/components/Popups/ReplyField/__tests__/MentionItem-test.tsx
+++ b/src/components/Popups/ReplyField/__tests__/MentionItem-test.tsx
@@ -35,8 +35,8 @@ describe('components/Popups/ReplyField/DefaultItemRow', () => {
                 } as unknown) as ContentState,
             });
 
-            expect(wrapper.find('a').exists()).toBeFalsy();
-            expect(wrapper.find('span').exists()).toBeTruthy();
+            expect(wrapper.exists('a')).toBeFalsy();
+            expect(wrapper.exists('span')).toBeTruthy();
         });
     });
 });
diff --git a/src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx b/src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx
index 0d315675a..ce4fa8fa1 100644
--- a/src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx
+++ b/src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx
@@ -13,14 +13,23 @@ const mockMention = {
     start: 0,
 };
 
+const mockEditorState = ({
+    getCurrentContent: () => ({ getPlainText: () => 'test' }),
+    getSelection: () => ({ getFocusOffset: () => 0 }),
+} as unknown) as EditorState;
+
 jest.mock('box-ui-elements/es/components/form-elements/draft-js-mention-selector', () => ({
     getActiveMentionForEditorState: () => mockMention,
+    addMention: () => mockEditorState,
 }));
 
 describe('components/Popups/ReplyField', () => {
     const defaults: Props = {
         className: 'ba-Popup-field',
-        collaborators: [],
+        collaborators: [
+            { id: 'testid1', name: 'test1' },
+            { id: 'testid2', name: 'test2' },
+        ],
         cursorPosition: 0,
         isDisabled: false,
         onChange: jest.fn(),
@@ -32,11 +41,6 @@ describe('components/Popups/ReplyField', () => {
     const getWrapper = (props = {}): ShallowWrapper<Props, State, ReplyField> =>
         shallow(<ReplyField {...defaults} {...props} />);
 
-    const mockEditorState = ({
-        getCurrentContent: () => ({ getPlainText: () => 'test' }),
-        getSelection: () => ({ getFocusOffset: () => 0 }),
-    } as unknown) as EditorState;
-
     describe('render()', () => {
         test('should render the editor with right props', () => {
             const wrapper = getWrapper();
@@ -76,6 +80,79 @@ describe('components/Popups/ReplyField', () => {
         });
     });
 
+    describe('getCollaborators()', () => {
+        test('should return empty list if no activeMention', () => {
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+
+            expect(instance.getCollaborators(null)).toHaveLength(0);
+        });
+
+        test('should return full collaborators list if mentionString length is less than 2', () => {
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+
+            const mockMentionShort = {
+                blockID: 'testid',
+                end: 1,
+                mentionString: '',
+                mentionTrigger: '@',
+                start: 0,
+            };
+
+            expect(instance.getCollaborators(mockMentionShort)).toMatchObject(defaults.collaborators);
+        });
+
+        test('should filter invalid items in collaborators', () => {
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+
+            expect(instance.getCollaborators(mockMention)).toHaveLength(0);
+        });
+
+        test('should filter items based on item name', () => {
+            const mockCollabs = [
+                { id: 'testid1', name: 'test1', item: { id: 'testid1', name: 'test1', type: 'user' } },
+                { id: 'testid2', name: 'test2', item: { id: 'testid2', name: 'test2', type: 'user' } },
+            ];
+            const mockMention2 = {
+                blockID: 'testid',
+                end: 6,
+                mentionString: 'test2',
+                mentionTrigger: '@',
+                start: 0,
+            };
+
+            const wrapper = getWrapper({ collaborators: mockCollabs });
+            const instance = wrapper.instance();
+
+            expect(instance.getCollaborators(mockMention2)).toMatchObject([mockCollabs[1]]);
+        });
+
+        test('should filter items based on item name', () => {
+            const mockCollabs = [
+                { id: 'testid1', name: 'test1', item: { id: 'testid1', name: 'test1', type: 'group' } },
+                {
+                    id: 'testid2',
+                    name: 'test2',
+                    item: { id: 'testid2', name: 'test2', type: 'group', email: 'test2@box.com' },
+                },
+            ];
+            const mockMention2 = {
+                blockID: 'testid',
+                end: 8,
+                mentionString: 'box.com',
+                mentionTrigger: '@',
+                start: 0,
+            };
+
+            const wrapper = getWrapper({ collaborators: mockCollabs });
+            const instance = wrapper.instance();
+
+            expect(instance.getCollaborators(mockMention2)).toMatchObject([mockCollabs[1]]);
+        });
+    });
+
     describe('getVirtualElement()', () => {
         let getSelectionSpy: jest.SpyInstance<Selection | null>;
 
@@ -136,6 +213,33 @@ describe('components/Popups/ReplyField', () => {
         });
     });
 
+    describe('updatePopupReference()', () => {
+        test('should call getVirtualElement and set state', () => {
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+
+            const getVirtualElementSpy = jest
+                .spyOn(instance, 'getVirtualElement')
+                .mockReturnValueOnce(('virtualElement' as unknown) as VirtualElement);
+            instance.updatePopupReference();
+
+            expect(getVirtualElementSpy).toBeCalledWith(mockMention);
+            expect(wrapper.state('popupReference')).toBe('virtualElement');
+        });
+    });
+
+    describe('handleSelect()', () => {
+        test('should call handle Change with updated editorState', () => {
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+
+            const handleChangeSpy = jest.spyOn(instance, 'handleChange');
+            instance.handleSelect(0);
+
+            expect(handleChangeSpy).toBeCalledWith(mockEditorState);
+        });
+    });
+
     describe('focusEditor()', () => {
         test('should call editor ref focus', () => {
             const wrapper = getWrapper();
@@ -162,4 +266,86 @@ describe('components/Popups/ReplyField', () => {
             expect(defaults.setCursorPosition).toBeCalledWith(0);
         });
     });
+
+    describe('stopDefaultEvent()', () => {
+        test('should prevent default and stop propagation', () => {
+            const mockEvent = ({
+                preventDefault: jest.fn(),
+                stopPropagation: jest.fn(),
+            } as unknown) as React.SyntheticEvent;
+
+            const wrapper = getWrapper();
+            wrapper.instance().stopDefaultEvent(mockEvent);
+
+            expect(mockEvent.preventDefault).toBeCalled();
+            expect(mockEvent.stopPropagation).toBeCalled();
+        });
+    });
+
+    describe('setPopupListActiveItem()', () => {
+        const wrapper = getWrapper();
+        wrapper.instance().setPopupListActiveItem(1);
+
+        expect(wrapper.state('activeItemIndex')).toBe(1);
+    });
+
+    describe('handleKeyDown', () => {
+        let mockKeyboardEvent: React.KeyboardEvent<HTMLDivElement>;
+        let wrapper: ShallowWrapper<Props, State, ReplyField>;
+        let instance: ReplyField;
+        let getCollaboratorsSpy: jest.SpyInstance;
+        let stopDefaultEventSpy: jest.SpyInstance;
+        let setActiveItemSpy: jest.SpyInstance;
+
+        beforeEach(() => {
+            mockKeyboardEvent = ({
+                preventDefault: jest.fn(),
+                stopPropagation: jest.fn(),
+            } as unknown) as React.KeyboardEvent<HTMLDivElement>;
+
+            wrapper = getWrapper();
+            wrapper.setState({ activeItemIndex: 0, popupReference: ('popupReference' as unknown) as VirtualElement });
+            instance = wrapper.instance();
+
+            getCollaboratorsSpy = jest.spyOn(instance, 'getCollaborators').mockReturnValue([
+                { id: 'testid1', name: 'test1' },
+                { id: 'testid2', name: 'test2' },
+            ]);
+            stopDefaultEventSpy = jest.spyOn(instance, 'stopDefaultEvent');
+            setActiveItemSpy = jest.spyOn(instance, 'setPopupListActiveItem');
+        });
+
+        test('should return not-handled if popup is not showing', () => {
+            wrapper.setState({ popupReference: null });
+
+            expect(instance.handleReturn(mockKeyboardEvent)).toEqual('not-handled');
+        });
+
+        test('should call handleSelect', () => {
+            instance.handleReturn(mockKeyboardEvent);
+
+            expect(stopDefaultEventSpy).toBeCalledWith(mockKeyboardEvent);
+            expect(setActiveItemSpy).toBeCalledWith(0);
+        });
+
+        test('should do nothing if collaborators length is 0', () => {
+            getCollaboratorsSpy.mockReturnValueOnce([]);
+            instance.handleArrowHelper(mockKeyboardEvent, () => 0);
+
+            expect(stopDefaultEventSpy).not.toBeCalled();
+            expect(setActiveItemSpy).not.toBeCalled();
+        });
+
+        test('should increase index if key is down', () => {
+            instance.handleDownArrow(mockKeyboardEvent);
+            expect(setActiveItemSpy).toBeCalledWith(1);
+        });
+
+        test('should decrease index if key is up', () => {
+            wrapper.setState({ activeItemIndex: 1 });
+
+            instance.handleUpArrow(mockKeyboardEvent);
+            expect(setActiveItemSpy).toBeCalledWith(0);
+        });
+    });
 });
diff --git a/src/components/Popups/ReplyField/__tests__/withMentionDecorator-test.tsx b/src/components/Popups/ReplyField/__tests__/withMentionDecorator-test.tsx
new file mode 100644
index 000000000..f5c006531
--- /dev/null
+++ b/src/components/Popups/ReplyField/__tests__/withMentionDecorator-test.tsx
@@ -0,0 +1,27 @@
+import { EditorState, CompositeDecorator, ContentState } from 'draft-js';
+import withMentionDecorator, { mentionStrategy } from '../withMentionDecorator';
+
+describe('components/Popups/ReplyField', () => {
+    test('should set decorator', () => {
+        const mockEditorState = EditorState.createEmpty();
+
+        jest.spyOn(EditorState, 'set');
+
+        const newEditorState = withMentionDecorator(mockEditorState);
+
+        expect(EditorState.set).toBeCalledWith(mockEditorState, { decorator: expect.any(CompositeDecorator) });
+        expect(newEditorState.getDecorator()).not.toBeNull();
+    });
+
+    test('should call findEntityRanges', () => {
+        const mockContentState = ContentState.createFromText('test');
+        const mockContentBlock = mockContentState.getFirstBlock();
+        const mockCallback = jest.fn();
+
+        jest.spyOn(mockContentBlock, 'findEntityRanges');
+
+        mentionStrategy(mockContentBlock, mockCallback, mockContentState);
+
+        expect(mockContentBlock.findEntityRanges).toBeCalledWith(expect.any(Function), mockCallback);
+    });
+});
diff --git a/src/components/Popups/ReplyField/withMentionDecorator.tsx b/src/components/Popups/ReplyField/withMentionDecorator.tsx
index 6bb0f37c1..0454944ab 100644
--- a/src/components/Popups/ReplyField/withMentionDecorator.tsx
+++ b/src/components/Popups/ReplyField/withMentionDecorator.tsx
@@ -1,7 +1,7 @@
 import { CompositeDecorator, ContentBlock, ContentState, EditorState } from 'draft-js';
 import MentionItem from './MentionItem';
 
-const mentionStrategy = (
+export const mentionStrategy = (
     contentBlock: ContentBlock,
     callback: (start: number, end: number) => void,
     contentState: ContentState,