fix: nested button inside button broke channel clicks
Invalid HTML: <button> inside <button> causes the browser to close the outer button prematurely, so clicking the channel name never fires setActiveChannel. Changed inner elements to <span role=button>.
This commit is contained in:
@@ -288,19 +288,21 @@ export function ChannelList() {
|
|||||||
<span className="text-gb-orange text-xs font-bold" title="Unread messages">●</span>
|
<span className="text-gb-orange text-xs font-bold" title="Unread messages">●</span>
|
||||||
)}
|
)}
|
||||||
<span className="flex items-center gap-1 text-xs">
|
<span className="flex items-center gap-1 text-xs">
|
||||||
<button
|
<span
|
||||||
onClick={(e) => handleNotifClick(e, channel.id)}
|
onClick={(e) => handleNotifClick(e, channel.id)}
|
||||||
className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 transition-opacity"
|
className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
|
||||||
title={`Notifications: ${NOTIF_LABELS[getLevel(channel.id)]}`}
|
title={`Notifications: ${NOTIF_LABELS[getLevel(channel.id)]}`}
|
||||||
|
role="button"
|
||||||
|
tabIndex={-1}
|
||||||
>
|
>
|
||||||
{notifIcon(channel.id)}
|
{notifIcon(channel.id)}
|
||||||
</button>
|
</span>
|
||||||
<span
|
<span
|
||||||
onClick={(e) => { e.stopPropagation(); setSettingsChannel({ id: channel.id, name: channel.name }); }}
|
onClick={(e) => { e.stopPropagation(); setSettingsChannel({ id: channel.id, name: channel.name }); }}
|
||||||
className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100"
|
className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 cursor-pointer"
|
||||||
title="Channel settings"
|
title="Channel settings"
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={-1}
|
||||||
>
|
>
|
||||||
[⚙]
|
[⚙]
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user