LabeledFieldView with a value renders label incorrectly when disabled

[oleq]

📝 Provide detailed reproduction steps (if any)

A generalization of #10429.

We didn't notice this before because the only place where LabeledFieldView was getting disabled was the table properties form and we reset the value there automatically when the field gets disabled. Now we have this use-case in find and replace and probably more will come

❓ Possible solution

Most likely this will require only changes in CSS.

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Reinmar]

Refinement notes:

• Tricky to reproduce
• Sometimes happens... sometimes not
• Not clear what may be wrong here (focus or emptiness detection? browser bug?)
• Estimate: 1pt as the top ROI margin

[oleq]

I couldn't reproduce it in the F&R UI but it is still in the table props form:

What's going on here:

1. The input CSS .ck-input-text_empty class that controls the look and the location of the label is set upon DOM #change.
2. The color input is focused by the user (empty = true, focused = true, readonly = false).
3. The user is typing.
   1. There was no DOM #change event yet (empty = true, focused = true, readonly = false).
4. They click the dropdown and change the border type. This:
   1. Does not blur the color input
      1. Still no DOM #change event (empty = true, focused = true, read-only = false)
   2. Sets readonly = true on the color input DOM element, which changes the way it looks (empty = true, focused = true, read-only = true)
5. The CSS of the field never assumed that it is possible to have an "empty" (at least by CSS), read-only, and focused (at the same time) input with some uncommitted value rendered (still, no #change...). If it's empty, there should be nothing there so it is safe to overlay the label.

The problem is the .ck-input-text_empty class logic. It is updated only on blur/enter. Which is too late; it stays out of sync.