Dropdown: Tailwind optionDisabled with function not working

[igo]

Describe the bug

optionDisabled does not work if function is provided

Reproducer

No response

PrimeReact version

10.2.1

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

import React, { useState } from 'react';
import { Dropdown } from 'primereact/dropdown';

export default function UnstyledDemo() {
  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-center">
      <Dropdown
        value={selectedCity}
        onChange={(e) => setSelectedCity(e.value)}
        options={cities}
        optionLabel="name"
        optionDisabled={(o) => {
          console.log({ o, disable: o.code == 'NY' });
          return o.code == 'NY';
        }}
        placeholder="Select a City"
        className="w-full md:w-14rem"
      />
    </div>
  );
}

Expected behavior

New York cannot be selected

[kl-nevermore]

It's working
https://codesandbox.io/s/primereact-demo-forked-hrc9vx?file=/src/App.jsx

[igo]

Indeed that one is working. Seems that it is not working only with Tailwind: <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>

[melloware]

@igo i updated the ticket label to Tailwind from Bug

[igo]

@melloware just checking, did you only fix the styles in that commit? what about possibility to select option that is supposed to be disabled

[melloware]

@igo but these two Tailwind styles select-none pointer-events-none prevent the item from being selected.

It should work just like PrimeTek built in theme now.