fix: hovering when disabled filter chip

ita-social-projects · Nov 27, 2024 · 9c1d737 · 9c1d737
1 parent 7468446
commit 9c1d737
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/src/design-system/components/chip/Chip.scss b/src/design-system/components/chip/Chip.scss
@@ -27,7 +27,7 @@
 
   &.disabled {
     opacity: 0.7;
-    cursor: not-allowed;
+    pointer-events: none;
   }
 
   &--filter {
@@ -62,12 +62,7 @@
         box-shadow: var(--#{$prefix}box-shadow-xs);
       }
 
-      &.disabled {
-        opacity: 1;
-        color: var(--#{$prefix}blue-gray-500);
-      }
-
-      &.selected {
+      &.selected:not(.disabled) {
         color: var(--#{$prefix}blue-gray-800);
 
         &:hover {
@@ -80,7 +75,7 @@
         }
       }
 
-      &.unselected {
+      &.unselected:not(.disabled) {
         &:hover {
           background-color: var(--#{$prefix}blue-gray-50);
           color: var(--#{$prefix}blue-gray-800);
@@ -93,6 +88,11 @@
       }
     }
 
+    &.disabled {
+      opacity: 1;
+      color: var(--#{$prefix}blue-gray-500);
+    }
+
     .dropdown-menu {
       position: absolute;
       top: 100%;

diff --git a/src/design-system/components/chip/Chip.tsx b/src/design-system/components/chip/Chip.tsx
@@ -82,15 +82,15 @@ const FilterChip: React.FC<FilterChipProps> = ({
   variant = 'filled',
   startIcon = <CircleIcon style={{ fontSize: 'inherit' }} />,
   endIcon = <ExpandMoreIcon style={{ fontSize: 'inherit' }} />,
-  disabled = false,
+  disabled = true,
   size = 'md'
 }) => {
   const [isOpen, setIsOpen] = useState(false)
   const [selectedOption, setSelectedOption] = useState<string | null>(null)
 
   const handleSelect = (option: string) => {
     setSelectedOption(option)
-    setIsOpen(false)
+    setIsOpen((prev) => !prev)
   }
 
   const isSelected = Boolean(selectedOption)
@@ -121,9 +121,8 @@ const FilterChip: React.FC<FilterChipProps> = ({
             <li
               className='dropdown-item'
               key={option}
-              onClick={() => {
+              onMouseDown={() => {
                 handleSelect(option)
-                setIsOpen((prev) => !prev)
               }}
             >
               {option}