fix: select box bug

wetix · Feb 25, 2021 · ea7f10a · ea7f10a
1 parent 3599a6c
commit ea7f10a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/components/select/src/MultipleSelect.svelte b/components/select/src/MultipleSelect.svelte
@@ -32,13 +32,13 @@
   let clientHeight = 0;
 
   onMount(() => {
-    const onClick = () => {
-      show = false;
+    const onHide = (e: Event) => {
+      if (!ref!.contains(e.target as Node)) show = false;
     };
-    window.addEventListener("click", onClick);
+    window.addEventListener("click", onHide);
 
     return () => {
-      window.removeEventListener("click", onClick);
+      window.removeEventListener("click", onHide);
     };
   });
 
@@ -54,7 +54,7 @@
       }
       value = [...value];
       input!.focus();
-      dispatch("change", { value });
+      dispatch("change", value);
     }
   };
 
@@ -63,16 +63,13 @@
     if (val) {
       e.stopPropagation();
       value = value.filter((v) => v !== val);
-      dispatch("change", { value });
+      dispatch("change", value);
     }
   };
 </script>
 
 <div class="responsive-ui-select--multiple {className}" bind:this={ref}>
-  <div
-    class="responsive-ui-select-input"
-    on:click|stopPropagation={() => (show = true)}
-  >
+  <div class="responsive-ui-select-input" on:click={() => (show = true)}>
     <input {name} type="hidden" value={value.join(",")} />
     <span class="responsive-ui-select__tags" on:click={onRemove}>
       {#each value as item}
@@ -98,7 +95,7 @@
   </div>
   <div
     class="responsive-ui-select__dropdown"
-    on:click|stopPropagation={onSelect}
+    on:click={onSelect}
     style={`height:${show ? clientHeight : 0}px;max-height:${maxHeight}px;`}
   >
     <div bind:clientHeight style="padding:10px 0">

diff --git a/components/select/types/index.d.ts b/components/select/types/index.d.ts
@@ -11,7 +11,7 @@ interface SelectProps {
   ref?: null | HTMLSelectElement;
   name?: string;
   size?: number;
-  multiple?: false;
+  multiple?: boolean;
   value?: string | string[];
   disabled?: boolean;
   readonly?: boolean;

diff --git a/src/App.svelte b/src/App.svelte
@@ -577,6 +577,23 @@
     <button on:click={() => (openRightDock = true)}>open right dock</button>
   </div>
 
+  <Select
+    multiple={true}
+    size={5}
+    value={["e"]}
+    on:change={console.log}
+    options={[
+      { label: "CC", value: "cc" },
+      { label: "Option A", value: "a", disabled: true },
+      { label: "Z", value: "z" },
+      { label: "Option B", value: "b" },
+      { label: "Option C", value: "c" },
+      { label: "Option D", value: "d" },
+      { label: "Option E", value: "e" },
+      { label: "Option F", value: "f" },
+      { label: "Option G", value: "g" },
+    ]}
+  />
   <Select
     multiple={true}
     size={5}