Dropdown: Accessbility - cannot tab out of editable dropdown with clear icon

[immieowen]

Describe the bug

When focused on a Dropdown in primereact v10 with the editable prop, it becomes impossible to shift+tab to move focus back to the previous element. If you use editable and showClear props, you cannot tab forward either.

Reproducer

N/A - stackblitz has primereact v9, which does not have this bug.

System Information

react 19.0.0
primereact 10.9.2

Steps to reproduce the behavior

In primereact 10.9.2, render the following dropdown - you cannot tab or shift+tab to move focus away from the dropdown once you're focused within it (except by selecting an option, which returns focus to the start of the page, as per #6873 )

function App() {
  const [selectedCity, setSelectedCity] = useState(null);
  const cities = [
    { name: 'New York', code: 'NY' },
    { name: 'Rome', code: 'RM' },
    { name: 'London', code: 'LDN' },
    { name: 'Istanbul', code: 'IST' },
    { name: 'Paris', code: 'PRS' },
  ];

  return (
    <div className="card flex justify-content-center">
      <input placeholder="Shift + tab to here" />
      <Dropdown
        value={selectedCity}
        onChange={(e) => setSelectedCity(e.value)}
        options={cities}
        optionLabel="name"
        editable
        showClear
        placeholder="Select a City"
      />
      <input placeholder="Tab to here" />
    </div>
  );
}

Shift+tab being broken is also visible in the docs example. If you tab into the editable dropdown, or click on it, you cannot use shift+tab to move focus to the previous element - https://primereact.org/dropdown/#editable

Expected behavior

Should be able to shift+tab to move focus back from an editable Dropdown, and should be able to tab forward from an editable Dropdown with a clear icon.

[melloware]

Similar to: #7613

cc @akshayaqburst

[akshayaqburst]

@melloware Working on this now. Thanks,

[akshayaqburst]

@melloware I was not able to fix the focus trap issue. I have disabled clearIcon focus when editable mode is on. When I checked Stackoverflow and other open forums like Claude, it suggested me so.

Some finding from internet -

If tab navigation gets stuck when there's a clear icon inside an input box, there are a few common reasons this might happen:

1. The clear icon might be a clickable element (button) that's capturing the tab focus:

// Problematic implementation

× // This creates a tab stop

2. If the clear icon is absolutely positioned within the input wrapper, it might inadvertently be in the tab order.

Here's how to fix it:

Add tabIndex={-1} to the clear button to remove it from tab order:

×

3. Best practice solution combining both accessibility and proper tab behavior:

{/* clear logic */}} >×