Deactivate content of div

Photoshop UXP Plugin API
1

What is the best way to deactivate a div and all its content (buttons, sliders, textfields, radio-buttons …)?

2

I’m setting the elements to disabled.

For example <sp-button disabled>I'm a disabled button</sp-button>

1 Like
3 
   Array.from(document.querySelectorAll("#myDiv *")).forEach(sr => {
      sr.disabled = true
   });
1 Like
4

I tried this before and though it didn’t work. But there seems to be a bug. When a button contains an icon AND a “click” event listener is attached to it, the “disabled” option is ignored.

So this doesn’t work (disabled is ignored) …

<sp-button id="bbb" class="muted" quiet variant="secondary" nofocus disabled>
              <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
                <defs><style>.a {fill: #6E6E6E;}</style></defs>
                <!-- <title>S Search 18 N</title> -->
                <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M16.5865,15.107,12.7,11.2215A6.413,6.413,0,1,0,11.2215,12.7l3.886,3.886a1.05,1.05,0,0,0,1.479-1.479ZM3,7.5A4.5,4.5,0,1,1,7.5,12,4.5,4.5,0,0,1,3,7.5Z" />
              </svg>
            </sp-button>

Yet this does (disabled is working) …

<sp-button id="bbb" class="muted" quiet variant="secondary" nofocus disabled>
              bbb
            </sp-button>
5

I can’t reproduce it here. Your code is working fine.
If you are on Windows maybe it’s a Windows issue?

1 Like
6

Did you attach an Eventlistener “click” to it? Maybe it has something to do with the file dialog hack that I have to use?

// FILE DIALOG FIX
Array.from(document.querySelectorAll("[nofocus]:not([data-handler-added])"), el => {
  el.addEventListener("focus", evt => evt.target.blur());
  el.setAttribute("data-handler-added");
});
7

I only tried the HTML code.

1 Like
8

I ran into this same bug, where click events were being triggered on the DIV and SVG children of disabled buttons.

Adding this CSS rule fixed the issue for me:

sp-action-button *, sp-button * {
  pointer-events: none;
}
9

As I understand, this basically means, that SP elements have events not on the elements themselves, but rather on something inside them? :man_facepalming: