[FIX] Dealing well with pre-configured tags in Omnichannel

app/containers/UIKit/MultiSelect/index.js

@@ -157,7 +157,7 @@ export const MultiSelect = React.memo(({
 				disabled={disabled}
 				inputStyle={inputStyle}
 			>
-				{items.length ? <Chips items={items} onSelect={onSelect} theme={theme} /> : <Text style={[styles.pickerText, { color: themes[theme].auxiliaryText }]}>{placeholder.text}</Text>}
+				{items.length ? <Chips items={items} onSelect={item => (disabled ? {} : onSelect(item))} theme={theme} /> : <Text style={[styles.pickerText, { color: themes[theme].auxiliaryText }]}>{placeholder.text}</Text>}
 			</Input>
 		);
 	}

app/views/LivechatEditView.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Text, StyleSheet, ScrollView } from 'react-native';
 import { connect } from 'react-redux';
+import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 
 import { withTheme } from '../theme';
 import { themes } from '../constants/colors';
@@ -15,9 +16,9 @@ import { LISTENER } from '../containers/Toast';
 import EventEmitter from '../utils/events';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
 import { getUserSelector } from '../selectors/login';
-import Chips from '../containers/UIKit/MultiSelect/Chips';
 import Button from '../containers/Button';
 import SafeAreaView from '../containers/SafeAreaView';
+import { MultiSelect } from '../containers/UIKit/MultiSelect';
 
 const styles = StyleSheet.create({
 	container: {
@@ -27,6 +28,14 @@ const styles = StyleSheet.create({
 		fontSize: 20,
 		paddingVertical: 10,
 		...sharedStyles.textMedium
+	},
+	label: {
+		marginBottom: 10,
+		fontSize: 14,
+		...sharedStyles.textSemibold
+	},
+	multiSelect: {
+		marginBottom: 10
 	}
 });
 
@@ -67,9 +76,12 @@ const LivechatEditView = ({
 	};
 
 	const [tagParam, setTags] = useState(livechat?.tags || []);
+	const [tagParamSelected, setTagParamSelected] = useState(livechat?.tags || []);
 
 	useEffect(() => {
-		setTags([...tagParam, ...availableUserTags]);
+		const arr = [...tagParam, ...availableUserTags];
+		const uniqueArray = arr.filter((val, i) => arr.indexOf(val) === i);
+		setTags(uniqueArray);
 	}, [availableUserTags]);
 
 	const getTagsList = async(agentDepartments) => {
@@ -116,7 +128,7 @@ const LivechatEditView = ({
 			roomData.topic = params.topic;
 		}
 
-		roomData.tags = tagParam;
+		roomData.tags = tagParamSelected;
 
 		roomData.livechatData = {};
 		Object.entries(customFields?.livechat || {}).forEach(([key]) => {
@@ -227,34 +239,26 @@ const LivechatEditView = ({
 						editable={!!permissions[1]}
 					/>
 
-					<TextInput
-						inputRef={(e) => { inputs.tags = e; }}
-						label={I18n.t('Tags')}
-						iconRight='add'
-						onIconRightPress={() => {
-							const lastText = inputs.tags._lastNativeText || '';
-							if (lastText.length) {
-								setTags([...tagParam.filter(t => t !== lastText), lastText]);
-								inputs.tags.clear();
-							}
-						}}
-						onSubmitEditing={() => {
-							const keys = Object.keys(customFields?.livechat || {});
-							if (keys.length > 0) {
-								const key = keys.pop();
-								inputs[key].focus();
-							} else {
-								submit();
-							}
+					<Text
+						style={[
+							styles.label,
+							{ color: themes[theme].titleText }
+						]}
+					>
+						{ I18n.t('Tags') }
+					</Text>
+					<MultiSelect
+						options={tagParam.map(tag => ({ text: { text: tag }, value: tag }))}
+						onChange={({ value }) => {
+							setTagParamSelected([...value]);
 						}}
+						placeholder={{ text: I18n.t('Tags') }}
+						value={tagParamSelected}
+						context={BLOCK_CONTEXT.FORM}
+						multiselect
 						theme={theme}
-						editable={!!permissions[1]}
-					/>
-					<Chips
-						items={tagParam.map(tag => ({ text: { text: tag }, value: tag }))}
-						onSelect={tag => setTags(tagParam.filter(t => t !== tag.value) || [])}
-						style={{ backgroundColor: themes[theme].backgroundColor }}
-						theme={theme}
+						disabled={!permissions[1]}
+						inputStyle={styles.multiSelect}
 					/>
 
 					{Object.entries(customFields?.livechat || {}).map(([key, value], index, array) => (
@@ -293,7 +297,7 @@ LivechatEditView.propTypes = {
 	editLivechatRoomCustomfields: PropTypes.array
 };
 LivechatEditView.navigationOptions = ({
-	title: I18n.t('Livechat_edit')
+	title: I18n.t('Edit')
 });
 
 const mapStateToProps = state => ({