# \[BUG\] \<sp-textfield/\> selects first character after \`invalid\` state changes

**URL:** <https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916>\
**Category:** Photoshop\
**Created:** [November 20, 2021, 6:03pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916 "2021-11-20T18:03:11Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 20, 2021, 6:03pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/1 "2021-11-20T18:03:11Z")

</div>

On first render I have empty `<sp-textfield/>`. I start typing and all seems fine. Then I delete text in the field, `invalid` state changes, input turns red. Then, when I start typing again, first character is lost, because it always gets selected after it’s typed

```auto
    const isFirstRender = useRef(true)
    const [error, setError] = useState(false)
    const [title, setTitle] = useState("")

    useEffect(() => {
        if (isFirstRender.current) {
            isFirstRender.current = false

            return
        }

        setError(!title)
    }, [title]);

    return (
        <sp-textfield
            invalid={error ? true : null}
            onInput={(e) => setTitle(e.target.value.trim())}
            value={title}
        >
            <sp-label isrequired={true} slot="label">Title</sp-label>
        </sp-textfield>
    )

```

No issue if there’s no `invalid` attribute at all or it never changes (can be `true` on first render)

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [February 17, 2025, 9:54am UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/2 "2025-02-17T09:54:53Z")

</div>

3.5 years… Anything? I just got a client complaining about this issue 😞

---

<div class="post-metadata">

**Author:** ![blackRGB](https://avatars.discourse-cdn.com/v4/letter/b/58f4c7/32.png) [@blackRGB](https://forums.creativeclouddeveloper.com/u/blackRGB)\
**Post date:** [February 17, 2025, 8:13pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/3 "2025-02-17T20:13:15Z")

</div>

> [@Karmalakas](#):
>
> 3.5 years…

We’re looking forward to the next version of PS having a submenu: **Plugins \> Legacy2 \> UXP… your plugins**.

And the joyful news that: “Guys, we’re bringing back **Chromium** and **Node.js** , and **xbytor** is becoming the lead of the development team. We’ll come up with a name for the new platform later.” That would be awesome!

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [February 20, 2025, 6:41am UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/4 "2025-02-20T06:41:41Z")

</div>

Does it happen in swc as well? Btw shouldn’t be label parent of textfield?

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [February 20, 2025, 7:56am UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/5 "2025-02-20T07:56:17Z")

</div>

> [@Jarda](#):
>
> Btw shouldn’t be label parent of textfield?

According to [examples in the docs](https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-spectrum/Spectrum%20UXP%20Widgets/User%20Interface/sp-textfield/), no 😕

* * *

> [@Jarda](#):
>
> Does it happen in swc as well?

Didn’t test now. At the time SWC was not available and now it would be lots of work to change everywhere ☹

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [February 20, 2025, 8:31am UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/6 "2025-02-20T08:31:06Z")

</div>

I wouldn’t believe adobe uxp docs. Check mdn [\<label\>: The Label element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) their example has label as parent.

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [February 20, 2025, 8:48am UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/7 "2025-02-20T08:48:19Z")

</div>

I’ll need check that. But then there’s no point to have a `slot` at all and I guess it would misalign the UI from the default Ps UI recommendations. I want my plugin forms to look as close as possible to Ps UI and adapt if Adobe decides to make changes ☹

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [March 16, 2025, 10:38am UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/8 "2025-03-16T10:38:31Z")

</div>

But that also means if Adobe makes a changes it can break your UI automatically. I remember sp-checkbox with different vertical padding in each PS version 😃

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [March 16, 2025, 10:53am UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/9 "2025-03-16T10:53:12Z")

</div>

> [@Jarda](#):
>
> if Adobe makes a changes it can break your UI automatically

In such case it’s at least clear who’s fault it is 😅

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [March 16, 2025, 1:45pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/10 "2025-03-16T13:45:23Z")

</div>

Oh, BTW, if I remember it right, it’s now a second time I’ve got this from the review team after plugin submission

> Greetings from the Adobe Creative Cloud Integrations Review Team. We are writing to you about your plugin below:
> 
> ```
> Plugin ID: e0ff91d5
> Plugin name: Custom Panel Lite
> 
> ```
> 
> Hi Team, During the review of your “Custom Panel Lite” plugin we observed that while typing in the search text box, the first letter is automatically selected by default. Consequently, when the second letter is typed, it deletes the first letter. As a one time exception we are approving this plugin , kindly fix the issue and submit a patch.
> 
> Thank you,  
> The Creative Cloud Integrations Review Team

I’m sure at some point submission will be completely rejected because of Adobes own bugs. I’m thinking now maybe it’s worth pinging @Erin_Finnegan to forward this to the appropriate team

Also I see exact same behaviour on other UXP plugins, not just mine

---

<div class="post-metadata">

**Author:** ![Majji](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@Majji](https://forums.creativeclouddeveloper.com/u/Majji)\
**Post date:** [March 18, 2025, 1:56pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/11 "2025-03-18T13:56:32Z")

</div>

@Karmalakas When a validation error occurs, UXP needs to refresh textfields to display the invalid icon. This refresh causes two problems:

1. The textfield loses focus
2. When focus returns, all text becomes selected

This selection behavior is a default textfield characteristic in hosts and we cannot modify. When a user begins typing with text selected, their new input replaces all existing text—often resulting in the frustrating loss of their previous entry, in this case specifically the first letter.

As a temporary solution, I would suggest a workaround that:

- Detects when a textfield recovers from an invalid state
- Captures the text the user is typing
- Automatically reappends it to preserve their input

While this approach is unconventional, it effectively prevents the text loss issue until a more elegant solution becomes available.

```auto
const [error, setError] = useState(false);
  const [title, setTitle] = useState("");
  const [cachedText, setCachedText] = useState("");
  const [appendText, setAppendText] = useState(false);
  
  const handleInput = (e) => {
    const inputValue = e.target.value.trim();
    
    if (inputValue === "") {
      setError(true);
    } else if (error) {
      // When recovering from invalid state
      setError(false);
      setCachedText(inputValue);
      setAppendText(true);
      return;
    }
    
    // Apply appended text if needed
    if (appendText) {
      setTitle(cachedText + inputValue);
      setAppendText(false);
    } else {
      setTitle(inputValue);
    }
  };
  
  return (
    <sp-textfield 
      invalid={error ? true : null} 
      onInput={handleInput}
      value={title}
    >
      <sp-label isrequired={true} slot="label">Title</sp-label>
    </sp-textfield>
  );

```

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [March 18, 2025, 2:16pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/12 "2025-03-18T14:16:46Z")

</div>

> [@Majji](#):
>
> This selection behavior is a default textfield characteristic in hosts and we cannot modify

Why? This is clearly a UXP/host bug. Why not fix it in the core? Why suggest to developers to complicate their code?

I’m sorry, but for now I have more important work to do on my plugins. And all my plugins are already full of workarounds because of similar bugs, so I’m not adding another one, especially when it’s a non-breaking. I just keep sending links to topics here to Adobe review team and my users when they say something is glitchy and there’s an open bug already. And it’s not the only similar case when UI bugs aren’t addressed for years.. That’s even more frustrating, than disappearing first character 😞

---

<div class="post-metadata">

**Author:** ![indranil](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/indranil/32/2584_2.png) [@indranil](https://forums.creativeclouddeveloper.com/u/indranil)\
**Post date:** [March 18, 2025, 3:43pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/13 "2025-03-18T15:43:35Z")

</div>

> [@Karmalakas](#):
>
> Why? This is clearly a UXP/host bug. Why not fix it in the core? Why suggest to developers to complicate their code?

We recognize the inconvenience this causes but what you are running into here is behavior that is by design and this was the desired behavior by all internal Adobe plugins. It’s manifesting in this state, so we are only able to offer a workaround for now. Adding @samgannaway in case he might want to add on the default design here.

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [March 18, 2025, 3:52pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/14 "2025-03-18T15:52:27Z")

</div>

> [@indranil](#):
>
> behavior that is by design and this was the desired behavior by all internal Adobe plugins

I would really love to know the reasoning behind such decision. Maybe I’m missing something, but without more info this doesn’t make any sense to me why would anyone want a bug by design 🧐

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/7/760d8be387d0e3c04fc7a9d83fadb346fef3f63e.png)

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [March 19, 2025, 9:00am UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/15 "2025-03-19T09:00:28Z")

</div>

Text input widget in UXP is ~~garbage~~ very problematic. There are like 50-100 issues with it. It is some sort of C++ made UI overlay above the panel… therefore infinite z-index.

It would be great if there could be same text input as in real webbrowsers so it would behave in same way and be actually part of the HTML layout instead being rendered additionally above.

Textarea could have scrollbar on windows, scrollbar would not have z-index infinity and beyond. I could style it and e.g. change font or its size.

I think it could be better to make hybrid plugin capable of starting server and then use Webview for plugins UI. It could save days/weeks of development time. All CSS features supported, and proper canvas, full HTML DOM. npm modules and design systems working at first try without hacking.

You would not be able to publish on Marketplace… but considering its capabilities e.g. not able to make custom discount codes without sending e-mail or seeing customer details e.g. e-mail …it might be better to publish elsewhere anyway.

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [March 19, 2025, 9:07am UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/16 "2025-03-19T09:07:19Z")

</div>

> [@Jarda](#):
>
> make hybrid plugin capable of starting server

That’s the blocker for me ☹ I’ve no idea how to do it and no time to research. AT least not yet.

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [March 19, 2025, 9:19am UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/17 "2025-03-19T09:19:39Z")

</div>

I was able to do nice features in hybrid plugin with help of ChatGPT. C++ is well known for decades… plenty of examples. You are not going to ask for revolutionary code. It only needs to generate some glue for open sourced libraries made by someone else. UXP uses same NAPI as NodeJS… that should help as well. I also bough Davide book and tried some code samples to adjust.

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [March 19, 2025, 5:59pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-textfield-selects-first-character-after-invalid-state-changes/3916/18 "2025-03-19T17:59:52Z")

</div>

BTW, @Majji, your suggested workaround also doesn’t really work. Consider these steps:

- Start typing “photoshop”
- Realize you wanted first uppercase
- Delete everything and get error
- Want to type `P`, but a mistake is made and you type `O`
- You don’t want it to be `Ohotodhop` and you try to fix it
- Re-select that mistyped `O`
- Start typing `Photo....`
- You end up with `OPhoto...`

Honestly, I didn’t test it practically, but that’s what I get from the code and video