Sp-button with svg not disabled

Photoshop UXP Plugin API
1

Hello

I’m trying to disable sp-button, but if I put a svg inside, when I click the svg icon, onClick is fired always

   <sp-button
              id="callX"
              disabled
              onClick={() => {
                callX();
              }}
            >
              <Apply />
            </sp-button>

Also I am trying to change the icon color and it never changes with sp-button:disabled { fill: red }

Thanks in advance

2

Try

sp-button:disabled { pointer-events: none; }
sp-button:disabled svg { fill: red; }
3

It doesn’t work for me

4

Do you have a full minimal reproducible component example?

5

Yes!

Try this:

If you click in disabled button its ok, but if you do it in svg icon… is fired

6

Have you tried setting the svg to “disabled” also?

7

Yes, I tried and it doesn’t work

8

Try:

<sp-button id="btnPopulate" disabled="disabled">

Sorry, not at my PC, can’t check myself for sure

9

No problem, but same result :frowning:

10

I wouldn’t be surprised if it’s just another unsupported UI feature in UXP :man_shrugging: If I remember, I’ll try to play around after work with it. Had to implement a bunch of CSS workarounds on my own plugin :frowning:

11

I tried to play around and it seems that :disabled selector is just not supported. Same for sp-action-button

Also even on a not disabled button when you add pointer-events: none, it works on a button itself (click is not triggered), but icon still receives the event and triggers a click (same happens on a stock disabled sp-button - click is triggered if clicked on icon)

I’ll just ping @kerrishotts here. Sometimes these restrictions just doesn’t make sense :confused:

I have a feature request for my plugin which also requires dealing with disabled buttons, but it appears I’ll have to inform user, that it’s blocked by Adobe

1 Like
12

@kerrishotts, any insight on the :disabled icon click issue?

13

I am having a similar problem with click events on buttons with svg icons. Clicking the exterior of the button fires the button – but clicking on the interior of the svg icon and the button does not fire.

Annoying with icon only svg buttons.

14

I found a partial solution

onClick={(ev) => {
      if (!ev.currentTarget.disabled) {
        callX();
      }
    }}
15

On which element exactly? If I’m not mistaken, currentTartget is the icon if you click on the icon and it’s not actually disabled even if the button is, isn’t it?

16

In the button. My svg is inside the button and it works like this (maybe works because is inside?).
And also color is changing with this:

  .action-button-disabled {
    fill: red;
  }

  .....

  const disabled = { ...(!enableControls ? { disabled: true } : {}) };

  .....

  <sp-button
    id="callX"
    class={`action-button ${disabled.disabled ? 'action-button-disabled' : ''}`}
    {...disabled}
    onClick={(ev) => {
      if (!ev.currentTarget.disabled) {
        callX();
      }
    }}
  >
    <Apply />
  </sp-button>
17

So many issues ignored for years :disappointed:

Adobe, any chance UXP UI side will get any attention any time or is it just AI these days and no hands on small, but cruicial stuff?

Any hope we can get :disabled and poiner-events (among all the other issues) fixed? Currently the only way I found, is to deal with class names

  .disabled {
    pointer-events: none;
  }
18

I’ve started to create my own components due to these limitations…
For the button I use a simple div. This of course works fine with embedded svg elements.

<!-- Button.vue -->
<div
	aria-role="button"
	:disabled="busy"
	:size="sizes.key"
	:class="['button', props.class]"
	:data-theme="props.theme"
	:data-variant="props.variant"
>
	Nice Button
</div>

.button {
	cursor: pointer;
}
.button[disabled] {
	cursor: default;
	pointer-events: none;
}

/* or with this, the `.button` class can be omitted completely. */
[aria-role="button"][disabled] {
	/*...*/
}

Even with aria-role="button" the disabled attribute would still not prevent the click event to be fired. So, pointer-events is necessary.
I know, that aria attributes don’t have any effect anyway, I’m just used to code with accessibility in mind.

1 Like