fix: only show dropdown scrollbar if it is scrollable (#86)

* feat: only show dropdown scrollbar if it is scrollable

* chore: remove unnecessary overflow-hidden class from dropdown

---------

Co-authored-by: Merlin <[email protected]>

Author: Moerlin1337

README.md

@@ -85,7 +85,7 @@ These are the default Tailwind classes used for styling the component.
     placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400',
     clear: 'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80',
     clearIcon: 'text-lg font-bold text-center pl-3',
-    dropdown: 'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
+    dropdown: 'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-auto z-50 bg-white flex flex-col rounded-b',
     dropdownHidden: 'hidden',
     options: 'flex flex-col p-0 m-0 list-none',
     option: 'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3 hover:text-gray-800 hover:bg-gray-100',

src/style/tailwind.css

@@ -16,7 +16,7 @@
 
 
 .multiselect-dropdown {
-    @apply max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b;
+    @apply max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-auto z-50 bg-white flex flex-col rounded-b;
 }
 
 .multiselect-dropdown.is-hidden {

src/utils/defaultTheme.ts

@@ -7,7 +7,7 @@ export const defaultTheme = {
   placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400',
   clear: 'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80',
   clearIcon: 'text-lg font-bold text-center pl-3',
-  dropdown: 'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
+  dropdown: 'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-auto z-50 bg-white flex flex-col rounded-b',
   dropdownHidden: 'hidden',
   options: 'flex flex-col p-0 m-0 list-none',
   option: 'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3 hover:text-gray-800 hover:bg-gray-100',
@@ -28,7 +28,7 @@ export const baseStyle = {
   placeholder: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
   clear: 'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80',
   clearIcon: 'text-lg font-bold text-center pl-3',
-  dropdown: 'absolute -left-px -right-px bottom-0 transform translate-y-full border -mt-px overflow-y-scroll z-50 flex flex-col rounded-b',
+  dropdown: 'absolute -left-px -right-px bottom-0 transform translate-y-full border -mt-px overflow-y-auto z-50 flex flex-col rounded-b',
   dropdownHidden: 'hidden',
   options: 'flex flex-col list-none',
   option: 'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug',