DataTable: On click at dropdown option in a cell editor doesn't set the value for the datatable cell - Keypress works

[hu9000]

Describe the bug

Using the mouse to select an option from the dropdown doesn't set the value in the "Country" column of the datatable. But, using the keyboard ("tab" ,"enter" ), said value is updated at the datatable with cell editor.

Reproducer

https://codesandbox.io/s/elastic-yalow-hdlfzx?file=/src/App.tsx

PrimeReact version

10.0.5

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Go to Country cell and click it
2. Click on the dropdown
3. Select any country option
4. Value at the datatable cell is not updated.
   Screen sample of the behavior

Expected behavior

Country cell must be updated to the country selected on the dropdown. Like press the DOWN key then TAB is working.

[melloware]

Duplicate of #2666 see that ticket for the solution.

Let me know if that doesn't work.

[hu9000]

Thank you for your response.
After adding the code appendTo={"self"} to the dropdown you can now select the clicked option. But now when I navigate through the list of options with the keyboard, when I get to the last visible option, the list closes automatically.

[melloware]

@hu9000 see #4482