A few dropdown fixes (#3145)

* dropdown fixes

* changelog

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

CHANGELOG.md

@@ -45,6 +45,7 @@ By [@maxaudron](https://github.com/maxaudron) in [PR 3075](https://github.com/gr
 - Added a warning when attempting to launch an `Interface` via the `%%blocks` jupyter notebook magic command by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3126](https://github.com/gradio-app/gradio/pull/3126)
 - Fixes bug where interactive output image cannot be set when in edit mode by [@dawoodkhan82](https://github.com/freddyaboulton) in [PR 3135](https://github.com/gradio-app/gradio/pull/3135)
 - A share link will automatically be created when running on Sagemaker notebooks so that the front-end is properly displayed by [@abidlabs](https://github.com/abidlabs) in [PR 3137](https://github.com/gradio-app/gradio/pull/3137) 
+- Fixes a few dropdown component issues; hide checkmark next to options as expected, and keyboard hover is visible by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3145]https://github.com/gradio-app/gradio/pull/3145)
 - Fixed bug where example pagination buttons were not visible in dark mode or displayed under the examples table. By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3144](https://github.com/gradio-app/gradio/pull/3144) 
 
 ## Documentation Changes:

ui/packages/form/src/MultiSelect.svelte

@@ -26,9 +26,6 @@
 	const iconClearPath =
 		"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";
 
-	const iconCheckMarkPath =
-		"M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656";
-
 	function add(option: string) {
 		if (Array.isArray(value)) {
 			value.push(option);
@@ -52,10 +49,6 @@
 		}
 	}
 
-	function handleBlur(e: any) {
-		optionsVisibility(false);
-	}
-
 	function handleKeyup(e: any) {
 		if (e.key === "Enter") {
 			if (Array.isArray(value) && activeOption != undefined) {
@@ -75,9 +68,10 @@
 		}
 	}
 
-	function remove_all() {
+	function remove_all(e: any) {
 		value = [];
 		inputValue = "";
+		e.preventDefault();
 	}
 
 	function handleOptionMousedown(e: any) {
@@ -97,7 +91,7 @@
 	<div class="wrap-inner" class:showOptions>
 		{#if Array.isArray(value)}
 			{#each value as s}
-				<div on:click|stopPropagation={() => remove(s)} class="token">
+				<div on:click|preventDefault={() => remove(s)} class="token">
 					<span>{s}</span>
 					<div class:hidden={disabled} class="token-remove" title="Remove {s}">
 						<svg
@@ -119,12 +113,12 @@
 				autocomplete="off"
 				bind:value={inputValue}
 				on:focus={() => optionsVisibility(true)}
-				on:blur={handleBlur}
+				on:blur={() => optionsVisibility(false)}
 				on:keyup={handleKeyup}
 				{placeholder}
 			/>
 			<div
-				class:hidden={!value?.length || disabled}
+				class:hide={!value?.length || disabled}
 				class="token-remove remove-all"
 				title="Remove All"
 				on:click={remove_all}
@@ -166,10 +160,7 @@
 					class:dark:bg-gray-600={activeOption === choice}
 					data-value={choice}
 				>
-					<span
-						class:invisible={!value?.includes(choice)}
-						class="inner-item pr-1"
-					>
+					<span class:hide={!value?.includes(choice)} class="inner-item pr-1">
 						✓
 					</span>
 					{choice}
@@ -284,7 +275,15 @@
 		background: var(--color-background-secondary);
 	}
 
+	.active {
+		background: var(--color-background-secondary);
+	}
+
 	.inner-item {
 		padding-right: var(--size-1);
 	}
+
+	.hide {
+		visibility: hidden;
+	}
 </style>