Merge pull request #26 from miksrv/develop

Added Keyboard 'Escape' event for Dropdown and MultiSelect UI Components
miksrv · Nov 12, 2024 · e18316d · e18316d
2 parents 12b084a + a72b57f
commit e18316d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # simple-react-ui-kit
 
+## 1.3.3
+
+### Patch Changes
+
+-   Added Keyboard 'Escape' event for Dropdown and MultiSelect UI Components
+
 ## 1.3.2
 
 ### Patch Changes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "simple-react-ui-kit",
-    "version": "1.3.2",
+    "version": "1.3.3",
     "description": "A lightweight and flexible UI framework for building responsive React applications with customizable components.",
     "repository": "https://github.com/miksrv/simple-react-ui-kit.git",
     "scripts": {

diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
@@ -103,7 +103,7 @@ const Dropdown = <T,>({
         }
     }
 
-    const handleSearchKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleSearchKeyPress = (event: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {
         if (
             event.key === 'Enter' &&
             filteredOptions?.length &&
@@ -123,6 +123,10 @@ const Dropdown = <T,>({
             setSelectedOption(undefined)
             onSelect?.(undefined)
         }
+
+        if (event.key === 'Escape' && isOpen) {
+            setIsOpen(false)
+        }
     }
 
     const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -206,6 +210,7 @@ const Dropdown = <T,>({
                         variant={error ? 'negative' : undefined}
                         disabled={disabled}
                         onClick={toggleDropdown}
+                        onKeyDown={handleSearchKeyPress}
                         className={cn(styles.dropdownButton, selectedOption && styles.selected, isOpen && styles.open)}
                     >
                         <span className={styles.value}>

diff --git a/src/components/multiselect/MultiSelect.tsx b/src/components/multiselect/MultiSelect.tsx
@@ -107,6 +107,10 @@ const MultiSelect = <T,>({
             setSelectedOption(selected)
             onSelect?.(selected)
         }
+
+        if (event.key === 'Escape' && isOpen) {
+            setIsOpen(false)
+        }
     }
 
     const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -152,6 +156,12 @@ const MultiSelect = <T,>({
         }
     }
 
+    const handleToggleDropdownClick = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+        if (event.key === 'Enter' || event.key === 'Escape') {
+            toggleDropdown()
+        }
+    }
+
     useEffect(() => {
         document.addEventListener('mousedown', handleClickOutside)
 
@@ -218,7 +228,7 @@ const MultiSelect = <T,>({
                                 tabIndex={0}
                                 className={styles.toggleButton}
                                 onClick={toggleDropdown}
-                                onKeyDown={(e) => e.key === 'Enter' && toggleDropdown()}
+                                onKeyDown={handleToggleDropdownClick}
                             >
                                 {isOpen ? <Icon name={'KeyboardUp'} /> : <Icon name={'KeyboardDown'} />}
                             </span>