Page MenuHomePhabricator

[Regression] OOUI inputs in error state have blue and red borders on focus
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

await mw.loader.using(['mediawiki.widgets']);
const input = new mw.widgets.TitleInputWidget();
$('#mw-content-text').append(input.$element);
  • Type "." in the input.

What happens?:
Red border, blue box-shadow

image.png (809×73 px, 1 KB)

image.png (656×113 px, 13 KB)

What should have happened instead?:
Red border, red box-shadow

Other information (browser name/version, screenshots, etc.):
I believe it was all red before some changes. I think the reason is that --box-shadow-color-destructive--focus became blue.

Night mode is also affected.

P.S. The fact that "." shows no dropdown is another bug ("." is an invalid title, but a valid prefix for prefixsearch). The promise is rejected here.
P.P.S. Created T377375 for this one.

Event Timeline

CCiufo-WMF subscribed.

@Jack_who_built_the_house what OS/browser/version are you using? It is working for me on latest Chrome on macOS:

image.png (1,434×170 px, 13 KB)

Note that the border focus color and box shadow is supposed to be blue.

@Jack_who_built_the_house what OS/browser/version are you using? It is working for me on latest Chrome on macOS:

Oops, sorry, I have "Emulate a focused page" in DevTools, so I see the blue/red immediately.

To reproduce, please type "." in the input by hand.

To reproduce, please type "." in the input by hand.

Okay yeah I see it now, thanks. Looks like this is an issue with OOUI. Maybe something broke when we updated Codex styles but forgot to also update them in OOUI.

Note that the border focus color and box shadow is supposed to be blue.

To clarify – the border and box-shadow should be red, because "." is an invalid title.

T361734: Update focus color to be the same everywhere is the culprit. The reasoning concerns destructive buttons. But here we have an invalid input that should indicate an error. @DTorsani-WMF

T361734: Update focus color to be the same everywhere is the culprit. The reasoning concerns destructive buttons. But here we have an invalid input that should indicate an error. @DTorsani-WMF

Thanks for identifying that. I think we may not have accounted for the change impacting OOUI. We'll take a look at this next sprint.

CCiufo-WMF set the point value for this task to 1.Oct 21 2024, 4:40 PM

Setting 1 pt to account for an initial investigation into the cause. Once we know what the issue is, we'll decide what the desired behavior should be (do we want the old OOUI behavior, or the new Codex one).

CCiufo-WMF lowered the priority of this task from High to Medium.Oct 28 2024, 3:52 PM
CCiufo-WMF renamed this task from --box-shadow-color-destructive--focus is blue, not red to [Regression] OOUI inputs in error state have blue and red borders on focus.Oct 30 2024, 2:39 PM
CCiufo-WMF raised the priority of this task from Medium to High.

We will likely address this by reverting the application of the Codex colors/tokens to restore the previous OOUI behavior.

Change #1097588 had a related patch set uploaded (by VolkerE; author: VolkerE):

[oojs/ui@master] WikimediaUI theme: fix TextInput invalid focus style

https://gerrit.wikimedia.org/r/1097588

Change #1097588 merged by jenkins-bot:

[oojs/ui@master] WikimediaUI theme: fix TextInput invalid focus style

https://gerrit.wikimedia.org/r/1097588

@Volker_E let's keep this open until the OOUI release (T380783) goes out.

Change #1100546 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update OOUI to v0.51.3

https://gerrit.wikimedia.org/r/1100546

Change #1100849 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update OOUI to v0.51.4

https://gerrit.wikimedia.org/r/1100849

Change #1100546 abandoned by Eric Gardner:

[mediawiki/core@master] Update OOUI to v0.51.3

Reason:

Abandoned in favor of v0.51.4

https://gerrit.wikimedia.org/r/1100546

Change #1100849 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.51.4

https://gerrit.wikimedia.org/r/1100849