CODEWITHSUNDEEP
reactjstypescriptdropdownprimereact
Felipe Rodrigues
Felipe Rodrigues

Reputation: 21

Change PrimeReact Dropdown disabled option behavior

I'm having an issue with PrimeReact's dropdown. If an option is disabled, therefore it can't have any kind of beahavior aside from not being clickable and with no action. Is there any way to change that? I would like to put an icon next to the option span to open a tooltip box also from PrimeReact.

const project = () => {
  const planOptionTemplate = (option: optionTypes) => {
    const isDisabled = option.available ? false : true

    return (
      <div>
        <span>option.name</span>
        {isDisabled && <i className="test pi pi-ban ml-2" data-pr-tooltip='test'></i>}
      </div>
      );
    };

  return (
    <Tooltip target={`.test`} position="top" className="text-sm" />
    <Dropdown optionDisabled={(e)=> !e.available} />`
    )
  }

I tried put some stop propagation at the icon element, but it didn't work. I just want to have an icon next to the disabled option to open a tooltip box when hovering (desktop) or touching it (mobile).

Upvotes: 0

Views: 106

Answers (0)

Related Questions