diff --git a/src/pivot-table/components/cells/ColumnAdjuster.tsx b/src/pivot-table/components/cells/ColumnAdjuster.tsx
index d65d0658..40bb21be 100644
--- a/src/pivot-table/components/cells/ColumnAdjuster.tsx
+++ b/src/pivot-table/components/cells/ColumnAdjuster.tsx
@@ -3,6 +3,7 @@ import React, { useMemo, useState } from "react";
import { ColumnWidthType } from "../../../types/QIX";
import type { AdjusterCellInfo, DataModel } from "../../../types/types";
import { GRID_BORDER } from "../../constants";
+import { useBaseContext } from "../../contexts/BaseProvider";
import { useSelectionsContext } from "../../contexts/SelectionsProvider";
import { ColumnWidthValues } from "../../hooks/use-column-width";
import { CELL_PADDING } from "../shared-styles";
@@ -20,10 +21,11 @@ interface AdjusterProps {
* While dragging this components follows the pointer, and on mouse up all column widths are updated.
*/
const ColumnAdjuster = ({ cellInfo, columnWidth, dataModel, isLastColumn }: AdjusterProps) => {
+ const { interactions } = useBaseContext();
const { isActive } = useSelectionsContext();
const [, forceRerender] = useState({});
const positionAdjustment = isLastColumn ? CELL_PADDING : CELL_PADDING + GRID_BORDER;
- const shouldRender = !isActive && cellInfo.canBeResized;
+ const shouldRender = cellInfo.canBeResized && !!interactions.active && !isActive;
const tempWidth = useMemo(() => ({ initWidth: columnWidth, columnWidth, initX: 0 }), [columnWidth]);
diff --git a/src/pivot-table/components/cells/__tests__/ColumnAdjuster.test.tsx b/src/pivot-table/components/cells/__tests__/ColumnAdjuster.test.tsx
index 063daae6..a9eff537 100644
--- a/src/pivot-table/components/cells/__tests__/ColumnAdjuster.test.tsx
+++ b/src/pivot-table/components/cells/__tests__/ColumnAdjuster.test.tsx
@@ -1,3 +1,4 @@
+import type { stardust } from "@nebula.js/stardust";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import React from "react";
import { ColumnWidthType } from "../../../../types/QIX";
@@ -9,6 +10,8 @@ describe("", () => {
let cellInfo: AdjusterCellInfo;
let columnWidth: number;
let dataModel: DataModel | undefined;
+ let selections: ExtendedSelections;
+ let interactions: stardust.Interactions;
beforeEach(() => {
columnWidth = 100;
@@ -16,14 +19,16 @@ describe("", () => {
applyColumnWidth: jest.fn(),
} as unknown as DataModel;
cellInfo = { canBeResized: true } as AdjusterCellInfo;
+ interactions = { active: true };
+ selections = { isActive: () => false } as ExtendedSelections;
});
- const renderAdjuster = (isActive = false) =>
+ const renderAdjuster = () =>
render(
,
{
wrapper: ({ children }) => (
- isActive } as unknown as ExtendedSelections}>
+
{children}
),
@@ -37,15 +42,24 @@ describe("", () => {
expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).toBeInTheDocument();
});
- test("should not render ColumnAdjuster when isActive is true", () => {
- renderAdjuster(true);
+ test("should not render ColumnAdjuster when canBeResized is false", () => {
+ cellInfo = { canBeResized: false } as AdjusterCellInfo;
+ renderAdjuster();
+
expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).not.toBeInTheDocument();
});
- test("should not render ColumnAdjuster when canBeResized is false", () => {
- cellInfo = { canBeResized: false } as AdjusterCellInfo;
+ test("should not render ColumnAdjuster when isActive is true", () => {
+ selections.isActive = () => true;
+ renderAdjuster();
+
+ expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).not.toBeInTheDocument();
+ });
+ test("should not render ColumnAdjuster when interactions.active is false", () => {
+ interactions.active = false;
renderAdjuster();
+
expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).not.toBeInTheDocument();
});