my-app/src/components/forms/ParticipantsSelector.jsx

@@ -78,14 +78,13 @@ export function ParticipantsSelector({ compact = false }) {
 
 	const handleInputBlur = (e) => {
 		// Small delay to allow click events on dropdown items to fire first
-
 		setTimeout(() => {
 			// Only close if the new focus target is not within our dropdown
 			if (!dropdownRef.current?.contains(document.activeElement)) {
 				setIsDropdownOpen(false);
 				setFocusedIndex(-1);
 			}
-		}, 20);
+		}, 150);
 	};
 
 	const handleInputChange = (e) => {
@@ -209,6 +208,10 @@ export function ParticipantsSelector({ compact = false }) {
 										ref={el => itemRefs.current[index] = el}
 										className={`${styles.dropdownItem} ${isPersonSelected(person.name) ? styles.selectedItem : ''} ${index === focusedIndex ? styles.focusedItem : ''}`}
 										onClick={() => handleSelectPerson(person)}
+										onMouseDown={(e) => {
+											e.preventDefault(); // Prevent blur from firing
+											handleSelectPerson(person);
+										}}
 										role="option"
 										aria-selected={isPersonSelected(person.name)}
 									>
@@ -245,6 +248,10 @@ export function ParticipantsSelector({ compact = false }) {
 											ref={el => itemRefs.current[index] = el}
 											className={`${styles.dropdownItem} ${isPersonSelected(person.name) ? styles.selectedItem : ''} ${index === focusedIndex ? styles.focusedItem : ''}`}
 											onClick={() => handleSelectPerson(person)}
+											onMouseDown={(e) => {
+												e.preventDefault(); // Prevent blur from firing
+												handleSelectPerson(person);
+											}}
 											role="option"
 											aria-selected={isPersonSelected(person.name)}
 										>

my-app/src/pages/BookingDetails.jsx

@@ -46,6 +46,9 @@ export function BookingDetails({ addBooking }) {
 		booking.handleSave();
 	};
 
+	// Check if save button should be enabled (at least one other participant selected)
+	const isSaveButtonEnabled = booking.participants && booking.participants.length > 0;
+
 	const toggleAccordion = () => {
 		setIsAccordionOpen(!isAccordionOpen);
 	};
@@ -109,9 +112,15 @@ export function BookingDetails({ addBooking }) {
 					</div>
 
 					<div className={styles.footer}>
+						{!isSaveButtonEnabled && (
+							<div className={styles.participantRequirement}>
+								Lägg till minst en deltagare för att boka
+							</div>
+						)}
 						<button 
-							className={styles.saveButton}
+							className={`${styles.saveButton} ${!isSaveButtonEnabled ? styles.disabledButton : ''}`}
 							onClick={handleSave}
+							disabled={!isSaveButtonEnabled}
 						>
 							Boka
 						</button>

my-app/src/pages/BookingDetails.module.css

@@ -184,6 +184,7 @@
 	width: 100%;
 	padding: 1rem;
 	background-color: var(--su-blue);
+	background-color: #2D59F3;
 	color: var(--su-white);
 	border: none;
 	border-radius: 0.5rem;
@@ -210,4 +211,32 @@
 .saveButton:focus {
 	outline: 2px solid var(--su-sky);
 	outline-offset: 2px;
+}
+
+.disabledButton {
+	background-color: var(--bg-tertiary, #e5e5e5) !important;
+	color: var(--text-secondary, #666) !important;
+	cursor: not-allowed !important;
+	box-shadow: none !important;
+	opacity: 0.8;
+	border: 1px solid var(--border-light, #ddd) !important;
+}
+
+.disabledButton:hover {
+	background-color: var(--bg-tertiary, #e5e5e5) !important;
+	box-shadow: none !important;
+	transform: none !important;
+}
+
+.disabledButton:active {
+	transform: none !important;
+	box-shadow: none !important;
+}
+
+.participantRequirement {
+	color: var(--text-secondary, #666);
+	font-size: 0.9rem;
+	text-align: center;
+	margin-bottom: 0.5rem;
+	border-radius: 0.25rem;
 }