@tipp/ui 2.1.24 → 2.1.25

package/src/molecules/tag-selector.tsx

@@ -29,6 +29,11 @@ interface Item {
 
 const OPTION_HEIGHT = 32;
 
+const stopDefaultEvents = (e: React.KeyboardEvent):void => {
+  e.preventDefault();
+  e.stopPropagation();
+};
+
 export interface TagSelectorProps<T extends Item> {
   options?: T[];
   selected?: ID[];
@@ -127,14 +132,14 @@ export function TagSelector<T extends Item>(
   }, [options, selected]);
 
   const onDelete = useCallback(
-    (id: string) => {
+    (id: string) => { 
       setSelected(selected.filter((el) => el !== id));
     },
     [selected, setSelected]
   );
 
   const onSelect = useCallback(
-    (id: string) => {
+    (id: string) => { 
       if (maxCount && selected.length + 1 > maxCount) return;
       setSelected([...selected, id]);
     },
@@ -142,7 +147,7 @@ export function TagSelector<T extends Item>(
   );
 
   const toggleItem = useCallback(
-    (id: string) => {
+    (id: string) => { 
       if (selected.includes(id)) {
         onDelete(id);
       } else {
@@ -171,7 +176,7 @@ export function TagSelector<T extends Item>(
 
       switch (key) {
         case 'ArrowDown': {
-          e.preventDefault();
+          stopDefaultEvents(e);
           let newFocus = 0;
           if (typeof focusIndex === 'number') {
             newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;
@@ -182,7 +187,7 @@ export function TagSelector<T extends Item>(
         }
 
         case 'ArrowUp': {
-          e.preventDefault();
+          stopDefaultEvents(e); 
           let newFocus = 0;
           if (typeof focusIndex === 'number') {
             newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;
@@ -193,19 +198,21 @@ export function TagSelector<T extends Item>(
         }
 
         case 'Enter':
+          stopDefaultEvents(e);
           setValue('');
           if (focusIndex !== null) {
             toggleItem(filteredOptions[focusIndex]?.id);
           }
           break;
 
-        case 'Backspace':
+        case 'Backspace': 
           if (value.length === 0) {
             setSelected(selected.slice(0, -1));
           }
           break;
 
         case 'Escape':
+          stopDefaultEvents(e);
           setOpen(false);
           break;
       }
@@ -340,6 +347,8 @@ export function TagSelector<T extends Item>(
         onTouchMove={stopPropagationTouch}
         onWheel={stopPropagationWheel}
         sticky="always"
+        style={{
+          pointerEvents: 'fill',}}
       >
         <DropdownContainer
           currentItem={filteredOptions[focusIndex || 0]}