Background colour of UI widgets get overridden on Ajax load. [#3383631]

Problem/Motivation

When dialogs are loaded via ajax their primary button is missing the background color if the claro/claro.jquery.ui library has not already been loaded.

The primary button .button--primary should have its background set by the styles in claro/css/components/button.css. If claro/claro.jquery.ui was not already loaded in the initial page load, it gets loaded when the dialog is rendered. This library contains a style for .ui-widget to remove the background color, which has the same specificity as .button--primary. Since the ui-widget style appears later it takes precedence.

Steps to reproduce

With minimal profile:

Install Drupal 11.x with minimal profile
Set Claro as the Default theme (not just admin theme)
Enable ajax_test module (needs extension_discovery_scan_tests setting)
Visit /ajax-test/dialog
Click Link 6 (entity form) and notice the missing button background
Install contextual and toolbar modules and repeat steps 4-5. Since contextual module ultimately loads claro/claro.jquery.ui in the initial page load, the additional stylesheet is loaded in the correct order and the button is correctly styled.

With standard profile:

Install Drupal 11.x with standard profile
Set Claro as the Default theme (not just admin theme)
Enable ajax_test module (needs extension_discovery_scan_tests setting)
Visit /ajax-test/dialog
Click Link 6 (entity form)
Uninstall contextual module and repeat steps 4-5 and notice the missing button background

Without contextual module

With contextual and toolbar modules

Button in DOM
<button type="button" class="button button--primary js-form-submit form-submit ui-button ui-corner-all ui-widget">Save</button>

What we expect
The button to have the button--primary background colour retained.

Proposed resolution

Ensure claro's button.css takes precedence over jquery.ui/theme.css, either by ensuring the order these files are loaded, or by ensuring the button styles have higher specificity than the ui-widget styles.

Comment	File	Size	Author
#27	dialog-fixed.png	32.6 KB	mstrelan
#27	dialog-broken.png	32.11 KB	mstrelan
#17	scheduled transition.png	351.52 KB	kalash-j
#13	claro-ui-widget-button-styles-3383631-13.patch	1.2 KB	kelvinwong
#12	claro-ui-widget-button-color-3383631-12.patch	834 bytes	kelvinwong
#11	Screen Shot 2023-09-04 at 10.05.40 pm.png	29.62 KB	kelvinwong
#10	Screenshot_20230830_130338.png	50.19 KB	sebasgd
#8	3383631-7.patch	1.08 KB	nilesh.k
#3	Screenshot 2023-08-28 at 9.11.05 AM.png	310.18 KB	gauravvvv
#2	Screen_Shot_2023-08-28_at_10_51_21_am.jpg	69 KB	kelvinwong
	Screen Shot 2023-08-28 at 10.51.21 am.png	69.47 KB	kelvinwong

Issue fork drupal-3383631

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3383631-11.x changes, plain diff MR !10043
Check out this branch for the first time

Check out existing branch, if you already have it locally
3383631-10.5.x changes, plain diff MR !13775
Check out this branch for the first time

Check out existing branch, if you already have it locally
11.x compare
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

28 August 2023 at 01:03

KelvinWong created an issue. See original summary.

Comment #2

kelvinwong commented 28 August 2023 at 01:07

Issue summary:

View changes

Status	File	Size
new	Screen_Shot_2023-08-28_at_10_51_21_am.jpg	69 KB

1 file was hidden/shown/deleted

Status	File	Size
hidden	Screen Shot 2023-08-28 at 10.51.21 am.png	69.47 KB

Comment #3

gauravvvv commented 28 August 2023 at 03:50

Status	File	Size
new	Screenshot 2023-08-28 at 9.11.05 AM.png	310.18 KB

I tried reproducing the issue but button is working fine for me. I followed the same steps, please let me know if I am missing something.

Comment #4

kelvinwong commented 28 August 2023 at 12:36

Issue summary:

View changes

Update link to repo with the right correct version of Drupal.

Comment #5

kelvinwong commented 28 August 2023 at 12:49

RE: #3

That's interesting. What version of Drupal did you perform the test on?

Comment #6

kelvinwong commented 28 August 2023 at 13:10

From the style of your dialog. I can see the jquery.ui/theme.css did not get loaded. It is likely you are using the Drupal 11.x.

This problem happen to the current latest release of Drupal 10.1.2.

Comment #7

nilesh.k commented 29 August 2023 at 10:05

Status:

Active

» Needs review

Hi
as per the last comment i have reproduce issue on my local & created patch for the issue Background colour of UI widgets get overridden on Ajax load, attached the images for reference
Needs review

Before patch

After patch

Comment #8

nilesh.k commented 29 August 2023 at 10:07

Status	File	Size
new	3383631-7.patch	1.08 KB

Sorry miss the patch in comment #7, adding the in this comment

Comment #9

smustgrave commented 29 August 2023 at 14:08

Status:

Needs review

» Postponed (maintainer needs more info)

There a way to replicate this without a contrib module?

Comment #10

sebasgd commented 30 August 2023 at 18:12

Status	File	Size
new	Screenshot_20230830_130338.png	50.19 KB

I also stumbled into this issue, but not with the module described in the ticket. In my case it was with paragraphs.

When the user tries to add a media in the add/edit form, the modal button shows correctly.
But if the user adds a paragraph, from a different field, to the form, then if the user opens de modal again, the button shows with the gray background.

I managed to track a bit the issue. I found that some js libraries are being loaded again when the paragraph was being added to the form. One of the libraries is jquery.ui/theme.css, and this makes it to take more priority in css causing the button issue.

I attached a screenshot of the css file that gets loaded.

Comment #11

kelvinwong commented 4 September 2023 at 12:11

Status	File	Size
new	Screen Shot 2023-09-04 at 10.05.40 pm.png	29.62 KB

I am not surprised that happens on other modules. That extra reference to jquery.ui/theme.css injected by Ajax is also the cause in my case.

Look at the core/drupal.dialog defined in the info.yml, it extends the claro/claro.jquery.ui library.
https://git.drupalcode.org/project/drupal/-/blob/10.1.2/core/themes/clar...

  core/drupal.dialog:
    - claro/claro.drupal.dialog
    - claro/claro.jquery.ui

As a result, whenever the core Drupal dialog is called, it loads the jquery.ui/theme.css file, which sets all the .ui-widget background to none.
https://git.drupalcode.org/project/drupal/-/blob/10.1.2/core/themes/clar...

claro.jquery.ui:
  version: VERSION
  css:
    component:
      css/components/jquery.ui/theme.css: { weight: -1 }

In css/components/jquery.ui/theme.css
https://git.drupalcode.org/project/drupal/-/blob/10.1.2/core/themes/clar...

.ui-widget {
  background: none;
}

Steps to replicate the issue without involvement of contrib modules

Set Claro as the default theme, such that both the frontend and admin theme are Claro.

Create a basic page content with the following content in body field, you may need to switch to Full HTML in text format.

<p>
    <a class="use-ajax" href="/node/add/page" data-dialog-options="{&quot;width&quot;:600}" data-dialog-type="modal">Create basic page in modal dialog.</a>
</p>

After saving the page, try clicking on the "Create basic page in modal dialog" link, and you will see the save button is losing its primary button colour inside the model.

Comment #12

kelvinwong commented 4 September 2023 at 13:28

Status:

Postponed (maintainer needs more info)

» Needs review

Status	File	Size
new	claro-ui-widget-button-color-3383631-12.patch	834 bytes

Looking at the file description of jquery.ui/theme.css in the theme, this css file is meant to override the styles in /core/assets/vendor/jquery.ui/themes/base/theme.css.

However, I couldn't find any background set up with .ui-widget in the core css file. My recommendation to fix the problem is to get rid of the background none in the theme style, as the css rule is redundant from my point of view.

jquery.ui/theme.css
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/themes/clar...

/core/assets/vendor/jquery.ui/themes/base/theme.css
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/assets/vend...

Comment #13

kelvinwong commented 4 September 2023 at 13:53

Status	File	Size
new	claro-ui-widget-button-styles-3383631-13.patch	1.2 KB

I will also recommend pulling in the button styles when jquery ui dialog is used. That will also fix the spacing issues between buttons.

Comment #14

smustgrave commented 8 September 2023 at 16:20

Version:	10.1.x-dev	» 11.x-dev
Status:	Needs review	» Needs work

Can the issue summary be updated to include full solution. Current IS talks about pulling in button.css but patch #13 also is removing some css.

Comment #15

kelvinwong commented 11 September 2023 at 01:05

Issue summary:

View changes

Proposed resolution is updated in the ticket to match the patch provided in #13.

Comment #16

kelvinwong commented 15 September 2023 at 00:37

Status:

Needs work

» Needs review

Comment #17

kalash-j commented 15 September 2023 at 08:05

Status	File	Size
new	scheduled transition.png	351.52 KB

I have installed 'drupal/scheduled_transitions:^2.3' this version of the module and i tried to reproduce the issue but i am not facing any problem as mentioned above its working fine

Comment #18

smustgrave commented 15 September 2023 at 16:52

Status:

Needs review

» Postponed (maintainer needs more info)

@KelvinWong tried following the step you gave in #11 and still not able to trigger the problem.

On D11.x and standard profile.

Comment #19

kelvinwong commented 19 September 2023 at 10:34

Version:	11.x-dev	» 10.1.x-dev
Status:	Postponed (maintainer needs more info)	» Needs review

This will not happen on Drupal 11.x. It is only an issue on Drupal 10.x. In D11 the library claro/claro.jquery.ui is not included when core/drupal.dialog is used, and the claro/claro.jquery.ui library is what pulling in the css style with background none.

Compare the library extend set up in D10 and D11:

In Drupal 11.x:
https://git.drupalcode.org/project/drupal/-/blob/11.x/core/themes/claro/...

libraries-extend:
...
  core/drupal.dialog:
    - claro/claro.drupal.dialog

In Drupal 10.x:
https://git.drupalcode.org/project/drupal/-/blob/10.1.2/core/themes/clar...

libraries-extend:
...
  core/drupal.dialog:
    - claro/claro.drupal.dialog
    - claro/claro.jquery.ui

Comment #20

smustgrave commented 19 September 2023 at 12:51

So 11.x is just the main branch now. 10.2 will be tagged from that. So sounds like this will be fixed. Should find the issue it was fixed in and see why it wasn’t backported to 10.1

Comment #21

smustgrave commented 19 September 2023 at 13:39

Actually appears the change mentioned in #19 it's on the 10.1.x branch already too. So think this can be closed.

Comment #22

smustgrave commented 19 September 2023 at 17:26

Fixed in #3378341: claro.jquery.ui css assets may be added the page multiple times

Comment #23

smustgrave commented 20 September 2023 at 13:52

Status:

Needs review

» Postponed (maintainer needs more info)

@KelvinWong can you confirm. I can move over credit.

Comment #24

kelvinwong commented 23 September 2023 at 12:33

I can confirm the button colour issue is now fixed in core.

Comment #25

smustgrave commented 25 September 2023 at 14:22

Status:

Postponed (maintainer needs more info)

» Closed (duplicate)

Comment #26

mstrelan commented 28 August 2024 at 01:40

Status:

Closed (duplicate)

» Active

Re-opening this as it's still an issue in 10.3. Steps to reproduce are the same but you must have the contextual module uninstalled. I believe it ultimately comes down to the contextual/drupal.contextual-toolbar library which ends up loading claro/claro.jquery.ui but the stylesheets are in a different order, so jquery.ui/theme.css takes precedence over claro's button.css.

Comment #27

mstrelan commented 28 August 2024 at 02:09

Version:	10.1.x-dev	» 10.3.x-dev
Issue summary:	View changes

Status	File	Size
new	dialog-broken.png	32.11 KB
new	dialog-fixed.png	32.6 KB

5 files were hidden/shown/deleted

Status	File	Size
hidden	Screenshot_20230830_130338.png	50.19 KB
hidden	Screen Shot 2023-09-04 at 10.05.40 pm.png	29.62 KB
hidden	claro-ui-widget-button-color-3383631-12.patch	834 bytes
hidden	claro-ui-widget-button-styles-3383631-13.patch	1.2 KB
hidden	scheduled transition.png	351.52 KB

Added steps to reproduce and updated screenshots without contrib.

Comment #28

mstrelan commented 28 August 2024 at 02:17

Version:	10.3.x-dev	» 11.x-dev
Issue summary:	View changes

Tested on 11.x and 10.4.x and can reproduce there also.

Comment #29

mstrelan commented 28 August 2024 at 02:18

Issue summary:

View changes

Comment #30

mstrelan commented 28 August 2024 at 03:19

Issue summary:

View changes

Comment #31

3 November 2024 at 18:06

saurav-drupal-dev made their first commit to this issue’s fork.

Comment #32

3 November 2024 at 18:12

saurav-drupal-dev opened merge request !10043

Comment #33

saurav-drupal-dev commented 3 November 2024 at 18:14

Added MR for the 11.x version from #27 patch

Comment #34

saurav-drupal-dev commented 3 November 2024 at 18:15

Status:

Active

» Needs review

Comment #35

smustgrave commented 7 November 2024 at 15:32

Status:

Needs review

» Needs work

Comment #36

saurav-drupal-dev commented 16 December 2024 at 18:27

Status:

Needs work

» Needs review

Comment #37

smustgrave commented 16 December 2024 at 18:44

Status:

Needs review

» Needs work

Why put it back into review? Please check the MR and any comments before changing status

Comment #38

11 November 2025 at 23:45

mariacha1 made their first commit to this issue’s fork.

Comment #39

11 November 2025 at 23:51

mariacha1 opened merge request !13775

Comment #40

mariacha1 commented 11 November 2025 at 23:57

Status:

Needs work

» Needs review

I rerolled the patch and added a Merge Request for 10.5.x because I needed it. I'm not 100% sure that the lines that remove the "background: none" are needed (adding css/components/button.css: {} was all I needed) so I'm curious if other folks find the same thing.

Comment #41

smustgrave commented 1 December 2025 at 17:51

Status:

Needs review

» Needs work

left comments

Comment #42

1 December 2025 at 17:51

Version:

11.x-dev

» main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.