shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: delay clearing modal content until fade-out on public board (#151)

Browse Source 
* fix: closing the modal on the public board page clears the content before the modal fade out animation finishes

* refactor: enhance CheckboxDropdown component to handle empty states and improve item rendering

* Update apps/web/src/views/public/board/CardModal.tsx

Co-authored-by: Henry <30578846+hjball@users.noreply.github.com>

---------

Co-authored-by: Henry <30578846+hjball@users.noreply.github.com>
This commit is contained in:
Ridham Khandar
2025-08-22 21:08:39 +05:30
committed by GitHub
parent 3233c35836
commit eb0ca9c738
2 changed files with 64 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
apps/web/src/components/CheckboxDropdown.tsx
View File

@@ -55,51 +55,59 @@ export default function CheckboxDropdown({
const renderMenuItems = (items: Item[], groupKey: string | null) => ( const renderMenuItems = (items: Item[], groupKey: string | null) => (
<> <>
{items.map((item) => ( {items.length > 0 ? (
<Menu.Item key={item.key}> items.map((item) => (
<div <Menu.Item key={item.key}>
className="group flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300" <div
onClick={(e) => { className="group flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
e.preventDefault(); onClick={(e) => {
handleSelect(groupKey, { key: item.key, value: item.value }); e.preventDefault();
}} handleSelect(groupKey, { key: item.key, value: item.value });
> }}
<input
id={item.key}
name={item.key}
type="checkbox"
className="h-[14px] w-[14px] rounded bg-transparent"
onClick={(event) => event.stopPropagation()}
onChange={() =>
handleSelect(groupKey, { key: item.key, value: item.value })
}
checked={item.selected}
/>
{item.leftIcon && (
<span className="ml-3 flex items-center">{item.leftIcon}</span>
)}
<label
htmlFor={item.key}
className="ml-3 text-[12px] text-dark-900"
> >
{item.value} <input
</label> id={item.key}
{handleEdit && ( name={item.key}
<button type="checkbox"
type="button" className="h-[14px] w-[14px] rounded bg-transparent"
className="invisible ml-auto group-hover:visible" onClick={(event) => event.stopPropagation()}
onClick={(event) => { onChange={() =>
event.preventDefault(); handleSelect(groupKey, { key: item.key, value: item.value })
event.stopPropagation(); }
handleEdit(item.key); checked={item.selected}
}} />
{item.leftIcon && (
<span className="ml-3 flex items-center">{item.leftIcon}</span>
)}
<label
htmlFor={item.key}
className="ml-3 text-[12px] text-dark-900"
> >
<HiEllipsisHorizontal size={20} className="text-dark-900" /> {item.value}
</button> </label>
)} {handleEdit && (
<button
type="button"
className="invisible ml-auto group-hover:visible"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
handleEdit(item.key);
}}
>
<HiEllipsisHorizontal size={20} className="text-dark-900" />
</button>
)}
</div>
</Menu.Item>
))
) : (
!handleCreate && (
<div className="flex items-center p-2 text-[12px] text-dark-900">
No items
</div> </div>
</Menu.Item> )
))} )}
{handleCreate && ( {handleCreate && (
<button <button
type="button" type="button"

25
apps/web/src/views/public/board/CardModal.tsx
View File

@@ -69,17 +69,20 @@ export function CardModal({
onClick={async (e) => { onClick={async (e) => {
e.preventDefault(); e.preventDefault();
closeModal(); closeModal();
try {
await router.replace( setTimeout(async () => {
`/${workspaceSlug}/${boardSlug}`, try {
undefined, await router.replace(
{ `/${workspaceSlug}/${boardSlug}`,
shallow: true, undefined,
}, {
); shallow: true,
} catch (error) { },
console.error(error); );
} } catch (error) {
console.error(error);
}
}, 400);
}} }}
> >
<HiXMark <HiXMark