From f0ed4ad32bc25ea3d3fa9143f2a9d2d74873d6a4 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Tue, 31 Mar 2026 13:42:41 +0530
Subject: [PATCH] fix: column toggle dropdown jumping on checkbox click

Replaced React Aria Checkbox with plain button to prevent event propagation
issues with outside-click handler causing dropdown re-render/scroll reset.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../application/table/column-toggle.tsx         | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/application/table/column-toggle.tsx b/src/components/application/table/column-toggle.tsx
index 3ff4d02..7001f5c 100644
--- a/src/components/application/table/column-toggle.tsx
+++ b/src/components/application/table/column-toggle.tsx
@@ -2,7 +2,6 @@ import { useState, useRef, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faColumns3 } from '@fortawesome/pro-duotone-svg-icons';
 import { Button } from '@/components/base/buttons/button';
-import { Checkbox } from '@/components/base/checkbox/checkbox';
 import type { FC } from 'react';
 
 const ColumnsIcon: FC<{ className?: string }> = ({ className }) => (
@@ -54,17 +53,17 @@ export const ColumnToggle = ({ columns, visibleColumns, onToggle }: ColumnToggle
                     </div>
                     <div className="max-h-64 overflow-y-auto py-1">
                         {columns.map(col => (
-                            <label
+                            <button
                                 key={col.id}
-                                className="flex items-center gap-2 px-3 py-1.5 text-xs text-primary hover:bg-primary_hover cursor-pointer"
+                                type="button"
+                                onClick={(e) => { e.stopPropagation(); onToggle(col.id); }}
+                                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-primary hover:bg-primary_hover cursor-pointer text-left"
                             >
-                                <Checkbox
-                                    size="sm"
-                                    isSelected={visibleColumns.has(col.id)}
-                                    onChange={() => onToggle(col.id)}
-                                />
+                                <span className={`flex size-4 shrink-0 items-center justify-center rounded border ${visibleColumns.has(col.id) ? 'bg-brand-solid border-brand text-white' : 'border-primary bg-primary'}`}>
+                                    {visibleColumns.has(col.id) && <span className="text-[10px]">✓</span>}
+                                </span>
                                 {col.label}
-                            </label>
+                            </button>
                         ))}
                     </div>
                 </div>