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 (