bug: align column filter popup to the right edge in RTL mode and enhance related documentation (jbetancur#1391)

Author: jbetancur

CHANGELOG.md

@@ -24,6 +24,7 @@ A summary of notable changes per release. For the full commit history see the [r
 - Tab no longer escapes an open column filter panel. Focus now cycles within it, so a keyboard user could not end up behind an open panel with no way back. → [Filtering](/docs/filtering)
 - A disabled context menu item's icon is no longer nearly invisible. The icon was muted with an opacity that multiplied with the already-dimmed disabled color. → [Context menu](/docs/context-menu)
 - A set filter's `(Select all)` now announces that it acts on the search results while a search narrows the list. New `selectAllFilteredAriaLabel` localization string. → [Filtering](/docs/filtering)
+- The column filter popup now aligns to the right edge of its button in RTL, matching the context menu. It always aligned its left edge to the button, so in RTL the panel opened across the wrong side of the column it belongs to. → [RTL](/docs/rtl) ([#1388](https://github.com/jbetancur/react-data-table-component/issues/1388))
 
 ---
 

apps/docs/src/components/demos/RTLDemo.tsx

@@ -62,6 +62,7 @@ export default function RTLDemo() {
 			name: isRTL ? 'الاسم' : 'Name',
 			selector: r => (isRTL ? r.nameAr : r.name),
 			sortable: true,
+			filterable: true,
 			width: '200px',
 			minWidth: '120px',
 			reorder: true,
@@ -70,6 +71,7 @@ export default function RTLDemo() {
 			name: isRTL ? 'القسم' : 'Department',
 			selector: r => (isRTL ? r.departmentAr : r.department),
 			sortable: true,
+			filterable: true,
 			minWidth: '140px',
 			reorder: true,
 		},
@@ -79,6 +81,8 @@ export default function RTLDemo() {
 			format: r => `$${r.salary.toLocaleString()}`,
 			right: true,
 			sortable: true,
+			filterable: true,
+			filterType: 'number',
 			width: '140px',
 			reorder: true,
 		},
@@ -115,6 +119,7 @@ export default function RTLDemo() {
 				highlightOnHover
 				striped
 				resizable
+				contextMenu
 			/>
 		</div>
 	);

apps/docs/src/pages/docs/rtl.astro

@@ -17,10 +17,10 @@ import PropsTable from '../../components/PropsTable.astro';
 
   <Demo
     title="Direction: LTR / RTL / AUTO"
-    description="Toggle between LTR, RTL, and AUTO. In RTL mode the pagination arrows reverse, column text aligns right-to-left, and the resize handles mirror to each column's left edge. Drag a column boundary to try it."
+    description="Toggle between LTR, RTL, and AUTO. In RTL mode the pagination arrows reverse, column text aligns right-to-left, and the resize handles mirror to each column's left edge. Drag a column boundary to try it, or open a filter panel or right-click a header to see the popups align to the right edge of their button."
     code={`import DataTable, { Direction } from 'react-data-table-component';
 
-<DataTable columns={columns} data={data} direction={Direction.RTL} pagination />;`}
+<DataTable columns={columns} data={data} direction={Direction.RTL} pagination contextMenu />;`}
   >
     <RTLDemo client:load />
   </Demo>
@@ -66,6 +66,7 @@ import PropsTable from '../../components/PropsTable.astro';
     <li>Pagination first/prev/next/last buttons have their icons reversed via <code>.rdt_paginationButtonRTL</code>.</li>
     <li>Column <code>right: true</code> alignment continues to work as expected. Align numbers relative to the reading direction of the cell content, not the page.</li>
     <li>With <code>resizable</code>, the resize handle moves to each column's left (end) edge and drag direction mirrors, so dragging away from the column widens it just like in LTR.</li>
+    <li>Popups anchored to a button, the column filter panel and the context menu, align their right edge to the button instead of their left, so they open across the column they belong to. Both are still clamped to stay inside the viewport.</li>
   </ul>
 
   <h2>Pairing with localization</h2>

src/__tests__/ColumnFilter.position.test.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import ColumnFilter from '../components/ColumnFilter';
+import DataTable from '../components/DataTable';
+import { Direction } from '../constants';
 import { emptyFilterState } from '../hooks/useColumnFilter';
 
 describe('ColumnFilter:viewport positioning', () => {
@@ -27,9 +29,11 @@ describe('ColumnFilter:viewport positioning', () => {
 		vi.unstubAllGlobals();
 	});
 
-	function openPanel() {
+	function openPanel(dir?: 'rtl') {
 		const result = render(
-			<ColumnFilter columnId="name" filterValue={emptyFilterState('text')} onFilterChange={vi.fn()} />,
+			<div dir={dir}>
+				<ColumnFilter columnId="name" filterValue={emptyFilterState('text')} onFilterChange={vi.fn()} />
+			</div>,
 		);
 		fireEvent.click(result.getByRole('button', { name: 'Filter column' }));
 		return { ...result, panel: result.getByRole('dialog') };
@@ -66,6 +70,33 @@ describe('ColumnFilter:viewport positioning', () => {
 		expect(panel.style.top).toBe('192px');
 	});
 
+	test('aligns the panel to the anchor right edge in RTL', () => {
+		anchor = new DOMRect(400, 40, 22, 22);
+		const { panel } = openPanel('rtl');
+		expect(panel.style.left).toBe('82px');
+	});
+
+	test('keeps an RTL panel inside the left viewport edge', () => {
+		anchor = new DOMRect(40, 40, 22, 22);
+		const { panel } = openPanel('rtl');
+		expect(panel.style.left).toBe('8px');
+	});
+
+	// The panel is not portaled, so it inherits `dir` from the table wrapper that
+	// `direction` sets. Guards the plumbing the standalone renders above skip.
+	test('picks up RTL from the table wrapper', () => {
+		anchor = new DOMRect(400, 40, 22, 22);
+		const { getAllByRole, getByRole } = render(
+			<DataTable
+				data={[{ name: 'Amir' }]}
+				columns={[{ name: 'Name', selector: (r: { name: string }) => r.name, filterable: true }]}
+				direction={Direction.RTL}
+			/>,
+		);
+		fireEvent.click(getAllByRole('button', { name: 'Filter column' })[0]);
+		expect(getByRole('dialog').style.left).toBe('82px');
+	});
+
 	test('repositions when adding a condition makes the panel taller and wider', () => {
 		anchor = new DOMRect(450, 380, 22, 22);
 		const { panel, getByRole } = openPanel();

src/components/ColumnFilter.tsx

@@ -316,7 +316,11 @@ export default function ColumnFilter({
 		const rect = panel.getBoundingClientRect();
 		const anchor = button.getBoundingClientRect();
 		const margin = 8;
-		const left = Math.max(margin, Math.min(anchor.left, window.innerWidth - rect.width - margin));
+		// Read the direction off the panel rather than take it as a prop: it picks up `dir`
+		// set anywhere up the tree, and ColumnFilter renders too far down to reach useRTL.
+		const isRTL = getComputedStyle(panel).direction === 'rtl';
+		const anchored = isRTL ? anchor.right - rect.width : anchor.left;
+		const left = Math.max(margin, Math.min(anchored, window.innerWidth - rect.width - margin));
 		let top = anchor.bottom + 4;
 		if (top + rect.height > window.innerHeight - margin) {
 			const flipped = anchor.top - rect.height - 4;