Dropdown keys and pointer events

src-web/components/core/Button.tsx

@@ -39,6 +39,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     type = 'button',
     justify = 'center',
     size = 'md',
+    disabled,
     ...props
   }: ButtonProps,
   ref,
@@ -50,6 +51,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
         'outline-none whitespace-nowrap',
         'focus-visible-or-class:ring',
         'rounded-md flex items-center',
+        disabled ? 'pointer-events-none' : 'pointer-events-auto',
         colorStyles[color || 'default'],
         justify === 'start' && 'justify-start',
         justify === 'center' && 'justify-center',
@@ -57,7 +59,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
         size === 'sm' && 'h-sm px-2.5 text-sm',
         size === 'xs' && 'h-xs px-2 text-sm',
       ),
-    [color, size, justify, className],
+    [className, disabled, color, justify, size],
   );
 
   if (typeof to === 'string') {
@@ -69,7 +71,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     );
   } else {
     return (
-      <button ref={ref} type={type} className={classes} {...props}>
+      <button ref={ref} type={type} className={classes} disabled={disabled} {...props}>
         {isLoading && <Icon icon="update" size={size} className="animate-spin mr-1" />}
         {children}
         {forDropdown && <Icon icon="chevronDown" size={size} className="ml-1 -mr-1" />}

src-web/components/core/Dropdown.tsx

@@ -25,6 +25,7 @@ export type DropdownItemSeparator = {
 
 export type DropdownItem =
   | {
+      key: string;
       type?: 'default';
       label: ReactNode;
       variant?: 'danger';
@@ -306,7 +307,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                       focused={i === selectedIndex}
                       onFocus={handleFocus}
                       onSelect={handleSelect}
-                      key={i + item.label}
+                      key={item.key}
                       item={item}
                     />
                   );

src-web/components/core/RadioDropdown.tsx

@@ -32,6 +32,7 @@ export function RadioDropdown<T = string | null>({
           return item;
         } else {
           return {
+            key: item.label,
             label: item.label,
             shortLabel: item.shortLabel,
             onSelect: () => onChange(item.value),