X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fcommon%2FChannelSelect.js;h=355b02b50d82824d0a3ff7ec6bc1901289c9ee9d;hb=d650f944d661debb64954ac590d978b07619a431;hp=2fbb2c1958f02a61c93bde7048440e7d11c643b4;hpb=c66d9d3c5eda563842c683827da1abf445b65483;p=alttp.git

diff --git a/resources/js/components/common/ChannelSelect.js b/resources/js/components/common/ChannelSelect.js
index 2fbb2c1..355b02b 100644
--- a/resources/js/components/common/ChannelSelect.js
+++ b/resources/js/components/common/ChannelSelect.js
@@ -7,7 +7,14 @@ import { useTranslation } from 'react-i18next';
 import Icon from './Icon';
 import debounce from '../../helpers/debounce';
 
-const ChannelSelect = ({ autoSelect, joinable, manageable, onChange, value }) => {
+const ChannelSelect = ({
+	autoSelect,
+	joinable,
+	manageable,
+	onChange,
+	readOnly,
+	value,
+}) => {
 	const [resolved, setResolved] = useState(null);
 	const [results, setResults] = useState([]);
 	const [search, setSearch] = useState('');
@@ -22,10 +29,10 @@ const ChannelSelect = ({ autoSelect, joinable, manageable, onChange, value }) =>
 				setShowResults(false);
 			}
 		};
-		document.addEventListener('click', handleEventOutside, true);
+		document.addEventListener('mousedown', handleEventOutside, true);
 		document.addEventListener('focus', handleEventOutside, true);
 		return () => {
-			document.removeEventListener('click', handleEventOutside, true);
+			document.removeEventListener('mousedown', handleEventOutside, true);
 			document.removeEventListener('focus', handleEventOutside, true);
 		};
 	}, []);
@@ -78,14 +85,16 @@ const ChannelSelect = ({ autoSelect, joinable, manageable, onChange, value }) =>
 	if (value) {
 		return <div className="d-flex align-items-center justify-content-between">
 			<span>{resolved ? resolved.title : value}</span>
-			<Button
-				className="ms-2"
-				onClick={() => onChange({ channel: null, target: { value: '' }})}
-				title={t('button.unset')}
-				variant="outline-danger"
-			>
-				<Icon.REMOVE title="" />
-			</Button>
+			{!readOnly ?
+				<Button
+					className="ms-2"
+					onClick={() => onChange({ channel: null, target: { value: '' }})}
+					title={t('button.unset')}
+					variant="outline-danger"
+				>
+					<Icon.REMOVE title="" />
+				</Button>
+			: null}
 		</div>;
 	}
 	return <div className={`channel-select ${showResults ? 'expanded' : 'collapsed'}`} ref={ref}>
@@ -94,6 +103,7 @@ const ChannelSelect = ({ autoSelect, joinable, manageable, onChange, value }) =>
 			name={Math.random().toString(20).substr(2, 10)}
 			onChange={e => setSearch(e.target.value)}
 			onFocus={() => setShowResults(true)}
+			readOnly={readOnly}
 			type="search"
 			value={search}
 		/>
@@ -127,6 +137,7 @@ ChannelSelect.propTypes = {
 	joinable: PropTypes.bool,
 	manageable: PropTypes.bool,
 	onChange: PropTypes.func,
+	readOnly: PropTypes.bool,
 	value: PropTypes.oneOfType([
 		PropTypes.number,
 		PropTypes.string,