helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-11 10:23:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: column toggle dropdown jumping on checkbox click

Browse Source 
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>
This commit is contained in:
saridsa2
2026-03-31 13:42:41 +05:30
parent 9ec8d194ac
commit f0ed4ad32b
1 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/application/table/column-toggle.tsx
View File

@@ -2,7 +2,6 @@ import { useState, useRef, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faColumns3 } from '@fortawesome/pro-duotone-svg-icons'; import { faColumns3 } from '@fortawesome/pro-duotone-svg-icons';
import { Button } from '@/components/base/buttons/button'; import { Button } from '@/components/base/buttons/button';
import { Checkbox } from '@/components/base/checkbox/checkbox';
import type { FC } from 'react'; import type { FC } from 'react';
const ColumnsIcon: FC<{ className?: string }> = ({ className }) => ( const ColumnsIcon: FC<{ className?: string }> = ({ className }) => (
@@ -54,17 +53,17 @@ export const ColumnToggle = ({ columns, visibleColumns, onToggle }: ColumnToggle
</div> </div>
<div className="max-h-64 overflow-y-auto py-1"> <div className="max-h-64 overflow-y-auto py-1">
{columns.map(col => ( {columns.map(col => (
<label <button
key={col.id} 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 <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'}`}>
size="sm" {visibleColumns.has(col.id) && <span className="text-[10px]">✓</span>}
isSelected={visibleColumns.has(col.id)} </span>
onChange={() => onToggle(col.id)}
/>
{col.label} {col.label}
</label> </button>
))} ))}
</div> </div>
</div> </div>