[BUG] Active state of the button with custom background color not working

Photoshop
, , ,
1

I’m so tired of chasing changes, that constantly break something :frowning:

Active state of the sp-action-button definitely used to work when I implemented it while developing a plugin, but now I noticed that at some point it just stopped working. It still works if there’s no custom background-color set to it. It also works when I switch the :active state on UDT Dev Tools, but it seems like button would not toggle the state when clicked on it.

Was thinking if it could be related to all the recent changes to how mouse events are treated :thinking:

Ps 23.3.2
Win 10

2

I cannot repro on the macOS side:

Can you try w/ same CSS on Windows?

HTML

<sp-action-button>hi</sp-action-button>

CSS

sp-action-button:active {
background-color: blue;
color: white;
outline: 2px solid blue;
}

FYI: @pkrishna @Sujai

3

Same works if I have a background color.

4

I just played around and found the exact issue. It’s the ::after and empty content

HTML:

<sp-action-button class="button1">Flame</sp-action-button>
<sp-action-button class="button2">hi</sp-action-button>

CSS:

sp-action-button.button1:after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border-width: 1px;
    border-radius: 5px;
    border-style: solid;
    border-bottom-color: red;
}

sp-action-button {
   margin: 10px;
   padding: 5px 10px;
   border-radius: 5px;
   background-color: green;
   border-width: 1px;
   border-top-color: purple;
}

sp-action-button:active {
   background-color: red;
}

I need a single border color and as you can see it doesn’t normally work. I then took your advice to fake borders with ::after and implemented it.

And borders still work, but now background is broken, which did work - it broke with one of the recent versions of Ps. Also, as I mentioned, switching :active state in Dev Tools, switches it without issue

5

OK… So while playing with it, I found this is most likely the exact same reason Inspector selector doesn’t work on these buttons (but this one never worked as I remember):

BTW, which plugin are you using in the video? I don’t see “Edit Code” among sample plugins. UI Playground is a mess

6

So I was thinking what’s going on and how ::after renders absolute element on top of the actual button and thought what would happen if I add pointer-events: none to it. And it actually helped - both active state triggers on mouse down and inspector now selects the button.

But this made me realize, there’s another issue with UDT - Dev Tools elements doesn’t show pseudo-elements, which also makes UI development more difficult.

I’m marking this post as a solution, because it kinda makes sense, but it doesn’t explain why it used to work

1 Like