diff --git a/app/containers/UIKit/MultiSelect/index.js b/app/containers/UIKit/MultiSelect/index.js
index 0d366b6d7..d1e42aaa5 100644
--- a/app/containers/UIKit/MultiSelect/index.js
+++ b/app/containers/UIKit/MultiSelect/index.js
@@ -157,7 +157,7 @@ export const MultiSelect = React.memo(({
disabled={disabled}
inputStyle={inputStyle}
>
- {items.length ? : {placeholder.text}}
+ {items.length ? (disabled ? {} : onSelect(item))} theme={theme} /> : {placeholder.text}}
);
}
diff --git a/app/views/LivechatEditView.js b/app/views/LivechatEditView.js
index f92215ffa..d5bae1a15 100644
--- a/app/views/LivechatEditView.js
+++ b/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]}
/>
- { 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();
- }
+
+ { I18n.t('Tags') }
+
+ ({ 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]}
- />
- ({ 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 => ({