Native inputs have appearance bug

[simonhenke]

One of the latest Photoshop updates introduced a new visual bug to native input elements:

It’s still stressing me out that we’re being forced to use a UI-Framework (Spectrum) which is barely customizable and that clunky. To be honest, I’ll rather stick with the broken native input for now, instead of the Spectrum one, which just doesn’t fit my plugins style (and the rest of the Photoshop interface):

I don’t have high hopes for the bug being fixed since native inputs are going to be deprecated soon anyways… But I really think Spectrum needs to provide more flexibility, otherwise we’re really limited in how we can design our panels. For example, what about cases where you’d want to have an input which looks just like text, but shows its style (background etc.) upon focus - not realizable with Spectrum.

The quiet attribute apparently just removes the border radius? And I’m not sure what’s going on with those fuzzy corners in the first place:

[kerrishotts]

You can use appearance: none; background-color: transparent on an input type="text" to take control over the surrounding styles. This will be added to sp-textfield before we deprecate so that you can continue to have chrome-less input fields.

Quiet spectrum text fields are intended to have a transparent background, but this is currently only true if you match the rest of the UI to the background color. I’ve asked the team if there’s a better way this can be addressed.

Windows & UXP has some pretty gnarly aliasing issues w/ curves. I don’t know how long that will take to get fixed – it has to do with how translucency is handled (which is a problem in a lot of areas, actually.) The new rendering engine coming in 2022 should address this eventually, but it’d be nice to fix it before then, but I can’t give a TBD right now.

It’s worth noting that there is a spectrum search variation. <sp-textfield type="search"> will get that for you. It takes care of the magnifier for you – if you choose to use it.

[simonhenke]

@kerrishotts

You can use appearance: none; background-color: transparent on an input type="text" to take control over the surrounding styles.

Thanks Kerri, I’ll try this out tomorrow.

@kerrishotts

This will be added to sp-textfield before we deprecate so that you can continue to have chrome-less input fields.

That’s good news, looking forward to that

@kerrishotts

Windows & UXP has some pretty gnarly aliasing issues w/ curves. I don’t know how long that will take to get fixed – it has to do with how translucency is handled (which is a problem in a lot of areas, actually.) The new rendering engine coming in 2022 should address this eventually, but it’d be nice to fix it before then, but I can’t give a TBD right now.

Ah yes, I’ve noticed that, too, when using border-radius in general. Nothing to dramatic, but even better if there’s a fix going to come eventually.

@kerrishotts

It’s worth noting that there is a spectrum search variation. <sp-textfield type="search"> will get that for you. It takes care of the magnifier for you – if you choose to use it.

Good to know. For now I’m still trying to match the Photoshop interface as precise as possible so I’m prefering the native controls, but nice to see that Spectrum is providing some assistance regarding such controls.

[Jarda]

I resigned on dealing with an appearance in native components. It looks different in each PS version including minor versions. I am trying to avoid native components as much as I can and if this is not possible… till the component within UI can do what I intended then it is ok.

[simonhenke]

@kerrishotts appearance: none worked fine background: transparent was not needed, it actually turned the background black. Without it, the input kept the native background color.

These are the styles:

:root {
  --inputHeight: 22px;
  --focusColor: #0f64d2;

  @media (prefers-color-scheme: dark) {
    --inputBgColor: #464646;
    --inputOutlineColor: #666666;
  }

  @media (prefers-color-scheme: darkest) {
    --inputBgColor: #292929;
    --inputOutlineColor: #474748;
  }

  @media (prefers-color-scheme: light) {
    --inputBgColor: #d1d1d2;
    --inputOutlineColor: #939393;
  }

  @media (prefers-color-scheme: lightest) {
    --inputBgColor: #fdfeff;
    --inputOutlineColor: #cdcccc;
  }
}

input[type='text'] {
  width: 100%;
  appearance: none; 
  background-color: var(--inputBgColor);
  height: var(--inputHeight);
  border: 1px solid var(--inputOutlineColor);
  padding: 2px 6px;

  &:focus {
    border-color: var(--focusColor);
  }
}

I noticed that the :focus stays active when the input had focus and the user clicks outside the panel. Not sure if that’s a bug.

---

@Jarda

Yes, I totally get your point. I also try to avoid them if possible, in other words, when the Spectrum alternative is customizable enough. At least with the Spectrum Dropdown/Select I had more luck than with text inputs. It was a bit tricky but I was able to build a wrapper around it giving it a somewhat native look:

This also made it possible to render a custom display text where I could join multiple selected options together. Things like that are not implemented yet in the Spectrum Dropdown/Select.