Dropdown: Item list immediately closes after opening

[howkymike]

Issue Description

When using the Dropdown as a cell editor in the DataTable, the options list closes immediately after being opened.

Root Cause

This issue occurs because the isOutsideClicked() method incorrectly returns true, triggering the switchCellToViewMode() function which closes the editor and the dropdown list. This happens because the down arrow SVG icon inside the Dropdown is replaced by the up arrow SVG (to indicate the list is expanded), causing the down arrow SVG to be detached from the DOM, making it appear as though a click occurred outside the DataTable.

Additional Notes

• This behavior is also inconsistent due to a race condition - if the isOutsideClicked() function is executed before the down arrow SVG is replaced, the Dropdown opens and behaves correctly.
• When you click on the arrow's container instead of clicking directly on the arrow image (i.e. you click on the surrounding margin), it works correctly.

Reproducer

https://stackblitz.com/edit/8apgvuc5-zrqniw2f?file=src%2FApp.jsx

System Information

primereact: 10.8.5 => 10.9.6

DEMO

recordPrimeReactDropdownBug.mov

Expected behavior

When using the Dropdown as a cell editor in the DataTable:

• The options list should remain open when clicked and allow the user to interact with the options, without closing prematurely.
• The Dropdown interaction should work consistently and not be impacted by DOM changes to the arrow SVG.

Quick fix

I do not think it is the right approach but the quick fix is to apply the following style:

.pp-dropdown-trigger-icon {
  pointer-events: none;
}

[melloware]

@gnawjaren can you weigh in here? You just did some work in this area for 10.9.6

[gnawjaren]

It seems this behavior is tied to the editable prop on Dropdown. I could reproduce it starting with version 10.9.1.
It only happens when clicking the svg icon inside the dropdown-trigger, as shown here:

Bug-svg-icon.mov

For some reason, clicking directly on the icon doesn’t trigger the expected behavior. When replacing the icon with something like <>v</> / <>^</>, it works as expected. (Wrapping with a <span> etc. does not work — it has to be a fragment.)
A workaround while not very pretty but at least functional would be:

    <Dropdown
        value={options.value}
        onChange={(e) => options.editorCallback(e.target.value)}
        options={names}
        optionLabel="name"
        dropdownIcon={<>⌄</>} // Proof the issue is with the icon element
        collapseIcon={<>˄</>}
        editable
        showOnFocus
        placeholder="Select name"
        className="w-full md:w-14rem"
      />

I guess it should be related to the icon being already unmounted when isOutsideClicked runs.
Because of the

setTimeout(() => {
    // svg element unmounted and replace by chevron up - 
    if (!selfClick.current && isOutsideClicked(e.target)) {
        // #2666 for overlay components and outside is clicked

        switchCellToViewMode(e, true);
    }
}, 0);

I hope it helps somehow - i am not sure how to fix it without the approach from my other pr. #7951 (which should fix it)

[melloware]

Agreed. @gnawjaren can you fix the merge conflicts in your other PR?