diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index 61f77aa2..0599ca02 100644 --- a/src-web/components/Sidebar.tsx +++ b/src-web/components/Sidebar.tsx @@ -40,7 +40,9 @@ export const Sidebar = memo(function Sidebar({ className }: Props) { [unorderedRequests], ); - const moveState = useRef<{ move: (e: MouseEvent) => void; up: () => void } | null>(null); + const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>( + null, + ); const unsub = () => { if (moveState.current !== null) { document.documentElement.removeEventListener('mousemove', moveState.current.move); @@ -57,9 +59,11 @@ export const Sidebar = memo(function Sidebar({ className }: Props) { const startWidth = width.value; moveState.current = { move: (e: MouseEvent) => { + e.preventDefault(); // Prevent text selection and things width.set(startWidth + (e.clientX - mouseStartX)); }, - up: () => { + up: (e: MouseEvent) => { + e.preventDefault(); unsub(); setIsResizing(false); }, @@ -79,13 +83,13 @@ export const Sidebar = memo(function Sidebar({ className }: Props) { {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx index 8582c30c..ece60edd 100644 --- a/src-web/components/core/Dropdown.tsx +++ b/src-web/components/core/Dropdown.tsx @@ -20,24 +20,30 @@ export type DropdownItem = export interface DropdownProps { children: ReactElement>; items: DropdownItem[]; + ignoreClick?: boolean; } -export function Dropdown({ children, items }: DropdownProps) { +export function Dropdown({ children, items, ignoreClick }: DropdownProps) { const [open, setOpen] = useState(false); const ref = useRef(null); - const child = useMemo( - () => - cloneElement(Children.only(children) as never, { - ref, - 'aria-haspopup': 'true', - onClick: (e: MouseEvent) => { + const child = useMemo(() => { + const existingChild = Children.only(children); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const props: any = { + ...existingChild.props, + ref, + 'aria-haspopup': 'true', + onClick: + existingChild.props?.onClick ?? + ((e: MouseEvent) => { + console.log('CLICK INSIDE'); e.preventDefault(); e.stopPropagation(); setOpen((o) => !o); - }, - }), - [children], - ); + }), + }; + return cloneElement(existingChild, props); + }, [children]); const handleClose = useCallback(() => { setOpen(false); diff --git a/src-web/components/core/Tabs/Tabs.tsx b/src-web/components/core/Tabs/Tabs.tsx index 539606be..6634855b 100644 --- a/src-web/components/core/Tabs/Tabs.tsx +++ b/src-web/components/core/Tabs/Tabs.tsx @@ -41,7 +41,7 @@ export const Tabs = memo(function Tabs({ for (const tab of tabs ?? []) { const v = tab.getAttribute('data-tab'); if (v === value) { - tab.setAttribute('tabindex', '0'); + tab.setAttribute('tabindex', '-1'); tab.setAttribute('data-state', 'active'); } else { tab.setAttribute('data-state', 'inactive'); @@ -67,7 +67,7 @@ export const Tabs = memo(function Tabs({ {tabs.map((t) => { const isActive = t.value === value; - if (t.options && isActive) { + if (t.options) { return ( e.stopPropagation()} + onClick={isActive ? undefined : () => handleTabChange(t.value)} className={classnames( isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900', )} @@ -88,21 +88,6 @@ export const Tabs = memo(function Tabs({ ); - } else if (t.options && !isActive) { - return ( - - ); } else { return (