DataTable: Cell Editing and Dropdown Filter Interaction

Dario-EDP commented 2 months ago

Describe the bug

When using a PrimeReact DataTable with cell editing mode (editMode="cell") and a Dropdown as the cell editor, there is an issue when trying to interact with the filter feature of the Dropdown.

The issue occurs as follows:

Clicking on an editable cell that uses a Dropdown opens the editor as expected.
If the Dropdown has filtering enabled (filter), typing in the filter input causes the DataTable to detect a loss of focus on the cell, prematurely closing the editor.
This prevents the user from selecting a filtered option because the Dropdown closes as soon as focus is lost, forcing the selection of the currently displayed value instead of allowing the user to select a new one.

Reproducer

https://stackblitz.com/edit/vitejs-vite-z4vrkd?file=src%2FApp.tsx

System Information

System:
    OS: Windows 10 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics
    Memory: 12.17 GB / 31.37 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74), ChromiumDev (129.0.2766.0)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    primereact: 10.6.3 => 10.6.3
    react: ^18.2.0 => 18.3.1
    tailwindcss: ^3.4.4 => 3.4.4

Steps to reproduce the behavior

No response

Expected behavior

When a user interacts with the filter input of a Dropdown in cell editing mode, the editor should remain open until the user makes a selection or explicitly moves focus away from the cell (e.g., by clicking outside the Dropdown).

sja-cslab commented 2 months ago

Seems not related to filter - if you remove the filter you still can't select an item via click

nathanmerry commented 1 month ago

Also happens with me, e.g: https://stackblitz.com/edit/vitejs-vite-clvyx5?file=src%2FApp.tsx

primefaces / primereact