Fix dropdown quirks (#63)

docs/components/dropdown-select.md

@@ -1,8 +1,11 @@
 # Dropdown
 <script setup>
-import { ref } from "vue";
+import {ref} from "vue";
 
-const value = ref(null)
+const value = ref(null);
+
+const newValue = ref(null);
+const options = ref([{ test: 'hello', display: 'no' }, { test: 'nob', display: 'yes' },  { test: 'ball', display: 'eat' }]);
 </script>
 
 <DemoContainer>
@@ -24,10 +27,10 @@ const value = ref(null)
     disabled
   />
   <DropdownSelect
-    v-model="value"
-    :options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
+    v-model="newValue"
+    :options="options"
     placeholder="Choose Frequency"
-    :display-name="(name) => name?.toUpperCase()"
+    :display-name="(name) => name?.display"
   />
 </DemoContainer>
 

lib/components/base/DropdownButton.vue

@@ -238,7 +238,7 @@ onBeforeUnmount(() => {
 
   .options {
     z-index: 10;
-    max-height: min(12rem);
+    max-height: 18.75remq;
     overflow-y: auto;
     box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
 

lib/components/base/DropdownSelect.vue

@@ -7,6 +7,7 @@
     class="animated-dropdown"
     @focus="onFocus"
     @blur="onBlur"
+    @focusout="onBlur"
     @mousedown.prevent
     @keydown.enter.prevent="toggleDropdown"
     @keydown.up.prevent="focusPreviousOption"
@@ -72,15 +73,15 @@ const props = defineProps({
     required: true,
   },
   defaultValue: {
-    type: String,
+    type: [String, Number, Object],
     default: null,
   },
   placeholder: {
-    type: String,
+    type: [String, Number],
     default: null,
   },
   modelValue: {
-    type: String,
+    type: [String, Number, Object],
     default: null,
   },
   renderUp: {
@@ -147,6 +148,7 @@ const onFocus = () => {
 }
 
 const onBlur = (event) => {
+  console.log(event)
   if (!isChildOfDropdown(event.relatedTarget)) {
     dropdownVisible.value = false
   }
@@ -176,7 +178,7 @@ const focusNextOptionOrOpen = () => {
 const isChildOfDropdown = (element) => {
   let currentNode = element
   while (currentNode) {
-    if (currentNode === this.$el) {
+    if (currentNode === dropdown.value) {
       return true
     }
     currentNode = currentNode.parentNode
@@ -243,7 +245,7 @@ const isChildOfDropdown = (element) => {
 
   .options {
     z-index: 10;
-    max-height: min(12rem);
+    max-height: 18.75rem;
     overflow-y: auto;
     box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.23",
+  "version": "0.4.24",
   "files": [
     "dist",
     "lib"