Dropdown: component interactable in disabled div

[RolT]

Describe the bug

Using the dropdown component inside a <div class="p-disabled"></div> section does not work as expected. It is still possible to click on the dropdown icon.

This is a CSS issue:

primereact/components/lib/componentbase/ComponentBase.js

Lines 264 to 266 in ef338f5

	svg.p-icon {
	pointer-events: auto;
	}

svg.p-icon {
  pointer-events: auto;
}

takes precedence over:

primereact/components/lib/componentbase/ComponentBase.js

Lines 318 to 322 in ef338f5

	.p-disabled, .p-disabled * {
	cursor: default;
	pointer-events: none;
	user-select: none;
	}

.p-disabled, .p-disabled * {
    pointer-events: none;
}

so it should probably be svg.p-icon:not(p-disabled) instead.

Reproducer

https://codesandbox.io/p/sandbox/primereact-demo-forked-5dmz9y

PrimeReact version

10.0.9

React version

18.x

Language

ES6

Build / Runtime

Create React App (CRA)

Browser(s)

Firefox

Steps to reproduce the behavior

Add a Dropdown component inside <div class="p-disabled"></div>

Expected behavior

The icon should not be clickable.

[melloware]

Agreed.

[melloware]

Just tested your scenario and svg.p-icon:not(p-disabled) does not fix it.

[melloware]

I got it PR submitted

[RolT]

Thanks that was fast !
Yes I may have missed a dot before the class: svg.p-icon:not(.p-disabled)

[melloware]

Yeah you did and that still didn't work while testing so the only thing that i could make work all the time was the .p-disabled first