feat: added radio inputs in dropdown select

M-Media-Group · Apr 19, 2024 · 8ad471c · 8ad471c
1 parent 02a7a9d
commit 8ad471c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/components/DropdownSelect.vue b/src/components/DropdownSelect.vue
@@ -364,7 +364,7 @@ defineExpose({ focus });
         >
           <label>
             <input
-              type="checkbox"
+              :type="multiple ? 'checkbox' : 'radio'"
               :disabled="option.disabled || props.disabled"
               :value="option[modelKey]"
               :checked="isOptionSelected(option)"

diff --git a/src/components/__tests__/DropdownSelect.spec.ts b/src/components/__tests__/DropdownSelect.spec.ts
@@ -82,10 +82,10 @@ describe("Dropdown Select", () => {
     // There should be no placeholder
     expect(select.text()).toBe("Two");
 
-    // Clicking the same option again should uncheck it and set the placeholder back
+    // Clicking the same option again should do nothing since its a radio
     await labels[1].trigger("click");
-    expect(wrapper.emitted("update:modelValue")?.[1]).toEqual([[]]);
-    expect(select.text()).toBe("Select an option");
+    expect(wrapper.emitted("update:modelValue")?.[1]).toEqual([["Two"]]);
+    expect(select.text()).toBe("Two");
 
     // When we add more options, the dropdown should still render
     await wrapper.setProps({ options: ["One", "Two", "Three", "Four"] });

diff --git a/src/components/__tests__/__snapshots__/DropdownSelect.spec.ts.snap b/src/components/__tests__/__snapshots__/DropdownSelect.spec.ts.snap
@@ -6,9 +6,9 @@ exports[`Dropdown Select > renders correctly 1`] = `
   <ul data-v-10d9b766="">
     <!--v-if-->
     <!--v-if-->
-    <li data-v-10d9b766=""><label data-v-10d9b766=""><input data-v-10d9b766="" type="checkbox" tabindex="0" value="One"> One</label></li>
-    <li data-v-10d9b766=""><label data-v-10d9b766=""><input data-v-10d9b766="" type="checkbox" tabindex="0" value="Two"> Two</label></li>
-    <li data-v-10d9b766=""><label data-v-10d9b766=""><input data-v-10d9b766="" type="checkbox" tabindex="0" value="Three"> Three</label></li>
+    <li data-v-10d9b766=""><label data-v-10d9b766=""><input data-v-10d9b766="" type="radio" tabindex="0" value="One"> One</label></li>
+    <li data-v-10d9b766=""><label data-v-10d9b766=""><input data-v-10d9b766="" type="radio" tabindex="0" value="Two"> Two</label></li>
+    <li data-v-10d9b766=""><label data-v-10d9b766=""><input data-v-10d9b766="" type="radio" tabindex="0" value="Three"> Three</label></li>
     <!--v-if-->
     <!-- if the results are limited because of the visible limit, but there are more filteredResults, show a message -->
     <!--v-if-->