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

diff --git a/resources/js/components/common/ChannelSelect.js b/resources/js/components/common/ChannelSelect.js
index 701f196..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 = ({ 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 = ({ 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);
 		};
 	}, []);
@@ -47,11 +54,17 @@ const ChannelSelect = ({ joinable, manageable, onChange, value }) => {
 			});
 			ctrl = null;
 			setResults(response.data);
+			if (autoSelect && !phrase && response.data.length === 1) {
+				onChange({
+					channel: response.data[0],
+					target: { value: response.data[0].id },
+				});
+			}
 		} catch (e) {
 			ctrl = null;
 			console.error(e);
 		}
-	}, 300), [manageable]);
+	}, 300), [autoSelect, joinable, manageable]);
 
 	useEffect(() => {
 		fetch(search);
@@ -72,14 +85,16 @@ const ChannelSelect = ({ 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}>
@@ -88,6 +103,7 @@ const ChannelSelect = ({ 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}
 		/>
@@ -117,9 +133,11 @@ const ChannelSelect = ({ joinable, manageable, onChange, value }) => {
 };
 
 ChannelSelect.propTypes = {
+	autoSelect: PropTypes.bool,
 	joinable: PropTypes.bool,
 	manageable: PropTypes.bool,
 	onChange: PropTypes.func,
+	readOnly: PropTypes.bool,
 	value: PropTypes.oneOfType([
 		PropTypes.number,
 		PropTypes.string,