diff --git a/app/components/emoji_picker/emoji_picker.js b/app/components/emoji_picker/emoji_picker.js index 66663cef5..c5fc3a2fb 100644 --- a/app/components/emoji_picker/emoji_picker.js +++ b/app/components/emoji_picker/emoji_picker.js @@ -35,6 +35,10 @@ const SECTION_MARGIN = 15; const SECTION_HEADER_HEIGHT = 28; const EMOJIS_PER_PAGE = 200; +export function filterEmojiSearchInput(searchText) { + return searchText.toLowerCase().replace(/^:|:$/g, ''); +} + export default class EmojiPicker extends PureComponent { static propTypes = { customEmojisEnabled: PropTypes.bool.isRequired, @@ -160,24 +164,25 @@ export default class EmojiPicker extends PureComponent { }); }; - changeSearchTerm = (text) => { + changeSearchTerm = (rawText) => { + const searchTerm = filterEmojiSearchInput(rawText); const nextState = { - searchTerm: text, + searchTerm: rawText, }; - - if (!text) { - nextState.currentSectionIndex = 0; - } - this.setState(nextState); + if (!searchTerm) { + nextState.currentSectionIndex = 0; + return; + } + clearTimeout(this.searchTermTimeout); - const timeout = text ? 100 : 0; + const timeout = searchTerm ? 100 : 0; this.searchTermTimeout = setTimeout(async () => { if (isMinimumServerVersion(this.props.serverVersion, 4, 7)) { - await this.props.actions.searchCustomEmojis(text); + await this.props.actions.searchCustomEmojis(searchTerm); } - const filteredEmojis = this.searchEmojis(text); + const filteredEmojis = this.searchEmojis(searchTerm); this.setState({ filteredEmojis, }); diff --git a/app/components/emoji_picker/emoji_picker.test.js b/app/components/emoji_picker/emoji_picker.test.js new file mode 100644 index 000000000..9d8f995f9 --- /dev/null +++ b/app/components/emoji_picker/emoji_picker.test.js @@ -0,0 +1,23 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {filterEmojiSearchInput} from './emoji_picker.js'; + +describe('components/emoji_picker/EmojiPicker', () => { + const testCases = [ + {input: 'smile', output: 'smile'}, + {input: 'SMILE', output: 'smile'}, + {input: ':smile', output: 'smile'}, + {input: ':SMILE', output: 'smile'}, + {input: 'smile:', output: 'smile'}, + {input: 'SMILE:', output: 'smile'}, + {input: ':smile:', output: 'smile'}, + {input: ':SMILE:', output: 'smile'}, + ]; + + testCases.forEach((testCase) => { + test(`'${testCase.input}' should return '${testCase.output}'`, () => { + expect(filterEmojiSearchInput(testCase.input)).toEqual(testCase.output); + }); + }); +});