Multiselect droprown does not focus to options when used in the dialog

[muhtomakin]

Multiselect dropdown cannot be selectable when used in Dialog

import React, { useState } from 'react';
import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog';
import { MultiSelect } from 'primereact/multiselect';

export default function MaximizableDemo() {
  const [visible, setVisible] = useState(false);
  const [selectedCities, setSelectedCities] = 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">
      <Button
        label="Show"
        icon="pi pi-external-link"
        onClick={() => setVisible(true)}
      />
      <Dialog
        header="Header"
        visible={visible}
        maximizable
        style={{ width: '50vw' }}
        onHide={() => setVisible(false)}
      >
        <div className="card flex justify-content-center">
          <MultiSelect
            value={selectedCities}
            onChange={(e) => setSelectedCities(e.value)}
            options={cities}
            optionLabel="name"
            placeholder="Select Cities"
            maxSelectedLabels={3}
            className="w-full md:w-20rem"
          />
        </div>
      </Dialog>
    </div>
  );
}

This is the code block from primereact workspace. As you can see after open the dropdown it cannot reachable with keyboard because it creates the options block out of the dialog box. Is there any chance to fix this issue? I am using the old version of primereact but I also tried with the latest version. This issue is still there.

Reproducer

No response

PrimeReact version

9.6.3

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

Yep its definitely a Focus Trap bug.

[muhtomakin]

It seems that with latest version this partially fixed. But there is still bug for this component. Once you use in dialog, you cannot close the dropdown panel. Escape will close the whole dialog. Once you open the dropdown you cant close in the dialog.