Option to disable main SplitButton Item

[urielTwito]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
when using split-button there is a difference between the first item and all others
there is a main action and other actions.
I can disable any sub item (items in the drop down)
But I cannot disable the main item.
if i set disable to true, it will disable the whole control, I need to disable only the first option and not the drop down

Expected behavior
option to disable only the "main" action

• Angular version: 7.2.7

• PrimeNG version: 7.1.0

** I think the code fix is easy **
just remove the disabled option from the main div and from the drop down button, and it will work.

[nhrrsn]

Did you come up with any workarounds for this?

[urielTwito]

work around I found is to change the order of the items, disabled items are last
and if all the items are disabled than the control is disabled

[chrizy]

I would like it so that if the sub item array is empty then the split icon is disabled, as in my case I dont know how many sub items there will be at runtime.
Thanks

[dsilvestregil]

Hi @urielTwito,
I have a solution to you:

HTML
<p-splitButton label="Main" icon="pi pi-ellipsis-v" (onClick)="click()" model="items" [styleClass]="disabled ? 'split-button-main-disabled' : ''"> </p-splitButton>
You can control it with the '[styleClass]'

SCSS:
.split-button-main-disabled { button:not(.ui-splitbutton-menubutton) { cursor: default !important; } button:not(.ui-splitbutton-menubutton):hover { background-color: $primaryColor !important; } }

It works fine for me!

[zahraa-khalil]

It worked with me to use a separate button and a menu button next to each others. That way I can control disabling the main button or items button.

<div style="display: flex"> <button [disabled]="disabled" type="button" pButton style="margin-right: 2px" (onClick)="action()" label="Save" ></button> <button type="button" pButton icon="pi pi-angle-down" class="arrow-btn" (click)="action-2($event)" ></button> <p-menu #menu [popup]="true" [model]="actionsMenu"></p-menu> </div>

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[abdullah2993]

@mertsincan this is still not resolved, if you can please reopen this one.

[pouyababaie]

#14602