From c76b1717be942bae99d0473125d2d7203c1fea2f Mon Sep 17 00:00:00 2001
From: 230Daniel <daniel.baynton@hotmail.com>
Date: Mon, 27 May 2024 02:42:54 +0100
Subject: [PATCH] Fixed the selector for like the fifth time

---
 .../dashboard/cardAdderComponent.js           | 19 +++++++++++++------
 .../components/dashboard/cardListComponent.js | 19 +++++++++++++------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/Frontend/src/components/dashboard/cardAdderComponent.js b/src/Frontend/src/components/dashboard/cardAdderComponent.js
index 2cc0527..fa3169e 100644
--- a/src/Frontend/src/components/dashboard/cardAdderComponent.js
+++ b/src/Frontend/src/components/dashboard/cardAdderComponent.js
@@ -16,9 +16,16 @@ class CardAdderComponent extends React.Component {
 	render() {
 		this.state.options = this.props.values.filter(x => !this.props.selected.includes(x));
 		return (
-			<div className="dashboard-card-list-component" onFocus={() => this.searchOpened()} onBlur={() => this.searchClosed()}>
+			<div className="dashboard-card-list-component">
 				<div className="dashboard-card-adder-component-search">
-					<input placeholder={this.props.prompt} value={this.state.selecting ? this.state.query : ""} ref={this.search} disabled={this.props.disabled} onInput={() => this.searchUpdated()} />
+					<input
+						placeholder={this.props.prompt}
+						value={this.state.query}
+						ref={this.search}
+						disabled={this.props.disabled}
+						onFocus={() => this.searchOpened()}
+						onInput={() => this.searchUpdated()}
+						onBlur={(e) => this.searchClosed(e)} />
 				</div>
 				{this.renderOptions()}
 			</div>
@@ -48,8 +55,9 @@ class CardAdderComponent extends React.Component {
 		this.setState({ selecting: true, query: this.search.current.value });
 	}
 
-	searchClosed() {
-		this.setState({ selecting: false });
+	searchClosed(e) {
+		if (e.relatedTarget && e.relatedTarget.tabIndex === -1) return;
+		this.setState({ selecting: false, query: "" });
 	}
 
 	getValue(id) {
@@ -57,12 +65,11 @@ class CardAdderComponent extends React.Component {
 	}
 
 	selectValue(id) {
-		this.searchClosed();
 		var newSelected = this.state.selected;
 		newSelected.push(id);
 		var newOptions = this.state.options;
 		newOptions.splice(newOptions.indexOf(id), 1);
-		this.setState({ selected: newSelected, options: newOptions });
+		this.setState({ selecting: false, query: "", selected: newSelected, options: newOptions });
 		this.props.onChanged();
 		this.props.onSelected(id);
 	}
diff --git a/src/Frontend/src/components/dashboard/cardListComponent.js b/src/Frontend/src/components/dashboard/cardListComponent.js
index 34a2054..98630e8 100644
--- a/src/Frontend/src/components/dashboard/cardListComponent.js
+++ b/src/Frontend/src/components/dashboard/cardListComponent.js
@@ -16,9 +16,16 @@ class CardListComponent extends React.Component {
 	render() {
 		var disabled = this.props.max && this.state.selected?.length >= this.props.max;
 		return (
-			<div className="dashboard-card-list-component" onFocus={() => this.searchOpened()} onBlur={() => this.searchClosed()}>
+			<div className="dashboard-card-list-component">
 				<div className="dashboard-card-list-component-search">
-					<input placeholder={this.props.prompt} value={this.state.selecting ? this.state.query : ""} ref={this.search} disabled={disabled} onInput={() => this.searchUpdated()} />
+					<input
+						placeholder={this.props.prompt}
+						value={this.state.query}
+						ref={this.search}
+						disabled={disabled}
+						onFocus={() => this.searchOpened()}
+						onInput={() => this.searchUpdated()}
+						onBlur={(e) => this.searchClosed(e)} />
 				</div>
 				{this.renderOptions()}
 				{this.renderSelected()}
@@ -67,8 +74,9 @@ class CardListComponent extends React.Component {
 		this.setState({ selecting: true, query: this.search.current.value });
 	}
 
-	searchClosed() {
-		this.setState({ selecting: false });
+	searchClosed(e) {
+		if (e.relatedTarget && e.relatedTarget.tabIndex === -1) return;
+		this.setState({ selecting: false, query: "" });
 	}
 
 	getValue(id) {
@@ -84,12 +92,11 @@ class CardListComponent extends React.Component {
 	}
 
 	selectValue(id) {
-		this.searchClosed();
 		var newSelected = this.state.selected;
 		newSelected.push(id);
 		var newOptions = this.state.options;
 		newOptions.splice(newOptions.indexOf(id), 1);
-		this.setState({ selected: newSelected, options: newOptions });
+		this.setState({ selecting: false, query: "", selected: newSelected, options: newOptions });
 		this.props.onChanged();
 	}