Fixed Multiselect and Dropdown backspace keyboard event, Added classN…

…ame props for Input UI component

CHANGELOG.md

@@ -7,6 +7,7 @@
 -   Added additional UI tests for Dropdown, Input and MultiSelect
 -   Added className props for Input UI component
 -   Fixed SVG arrow icon color for MultiSelect and Dropdown
+-   Fixed Multiselect and Dropdown backspace keyboard event
 
 ## 1.3.0
 

src/components/dropdown/Dropdown.tsx

@@ -115,6 +115,10 @@ const Dropdown = <T,>({
         }
 
         if ((event.key === 'Backspace' || event.key === 'Delete') && selectedOption?.key) {
+            if (search !== '') {
+                return
+            }
+
             setSearch(selectedOption?.value)
             setSelectedOption(undefined)
             onSelect?.(undefined)

src/components/input/Input.tsx

@@ -8,15 +8,18 @@ import styles from './styles.module.sass'
  * InputProps interface, representing the properties for the Input component.
  */
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Additional class names for custom styling */
+    className?: string
     /** Label text displayed above the input field */
     label?: string
     /** Error message displayed below the input field when an error occurs */
     error?: string
 }
 
-const Input: React.FC<InputProps> = ({ label, error, ...props }) => (
+const Input: React.FC<InputProps> = ({ className, label, error, ...props }) => (
     <div
         className={cn(
+            className,
             styles.inputContainer,
             error && styles.error,
             props.required && styles.required,

src/components/multiselect/MultiSelect.tsx

@@ -96,6 +96,10 @@ const MultiSelect = <T,>({
         }
 
         if (event.key === 'Backspace' || event.key === 'Delete') {
+            if (search !== '') {
+                return
+            }
+
             const selected = [...(selectedOption || [])]
 
             selected.pop()