Problem/Motivation

Olivero: autofill background in primary search block is not matching standard color.

Attaching a screen recording for reference.

Steps to reproduce

When we have searched for any keyword and when we search for any similar keyword then the suggestions come. and when we select any of suggestions then it the input field background-color is odd (not as per design).

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#30 safari.mov4.69 MBbnjmnm
#30 firefox.mov1.21 MBbnjmnm
#29 after-screenshot.png139.7 KBguru2023
#29 before-screenshot.png118.93 KBguru2023
#25 3224388-after-patch.mov1.02 MBnayana_mvr
#25 3224388-before-patch.mov1.19 MBnayana_mvr
#24 Screen Recording 2023-02-20 at 12.30.59 PM.mov6.2 MBgauravvvv
#22 After-new-patch.png140.98 KBShubham Sharma 77
#22 After-patch-apply-21.png136.45 KBShubham Sharma 77
#22 Before-patch.png138.67 KBShubham Sharma 77
#22 interdiff_21-22.txt2.42 KBShubham Sharma 77
#22 3224388-22.patch2.05 KBShubham Sharma 77
#21 3224388-21.patch1.33 KBgauravvvv
#18 Before patch #4.png79.82 KByashingole
#18 After Patch #4.png75.53 KByashingole
#13 Screenshot 2021-08-23 at 5.13.50 PM.png178.66 KBgauravvvv
#13 Screenshot 2021-08-23 at 5.10.46 PM.png94.57 KBgauravvvv
#11 After Patch 3224388.png403.59 KBchetanbharambe
#11 Before Patch 3224388.png403.95 KBchetanbharambe
#9 Screen Recording 2021-08-20 at 5.47.46 PM.mov2.06 MBgauravvvv
#5 After--patch.jpg110.08 KBranjith_kumar_k_u
#5 Before--patch.jpg110.22 KBranjith_kumar_k_u
#4 3224388-4.patch2.03 KBgauravvvv
#2 Screen Recording 2021-07-20 at 11.47.54.mov1.8 MBgauravvvv
#2 3224388-2.patch1.5 KBgauravvvv
Screen Recording 2021-07-20 at 11.25.41.mov4.08 MBgauravvvv

Comments

Gauravmahlawat created an issue. See original summary.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3224388-2.patch1.5 KB
new Screen Recording 2021-07-20 at 11.47.54.mov1.8 MB

I have added a patch please review.
adding after patch screen recording for reference.

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3224388-4.patch2.03 KB
ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new Before--patch.jpg110.22 KB
new After--patch.jpg110.08 KB

Applied the last patch and it works fine
Before patch
before patch

After patch
after patch

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Priority: Normal » Minor
xjm’s picture

xjm
she/her
Primary language English
commented
Priority: Minor » Normal

It's not actually an alignment error, but with the wrong color it looks like one. Pretty noticeable too. Setting as normal.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

What are the steps to reproduce this bug? I'm unable to reproduce.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new Screen Recording 2021-08-20 at 5.47.46 PM.mov2.06 MB

This is reproducible when we select any autofill input.

https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/ Search any keyword and back to homepage again and click on the input field, select the suggestions listed below to input box, you will see the background of input box and color or input is changed.

Adding a video for same.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

The movie definitely helps. Chrome isn't giving me the autofill option. I'll see if I can get that working.

chetanbharambe’s picture

chetanbharambe commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Before Patch 3224388.png403.95 KB
new After Patch 3224388.png403.59 KB

Hi @mherchel,
This is reproducible when we select any autofill input.

Verified and tested patch #4.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Appearance: Set Olivero theme
# Goto: search keyword
# Search any keyword and press enter
# Repeat this 2-3 times with different keywords
# Again go to the search keyword
# Select any keyword which is listed below the input box.
# User will see the background of the input box and color.

Expected Results:
# Autofill background in primary search block should be matching with standard color.

Actual Results:
# Autofill background in primary search block is not matching standard color.

Please refer attached screenshots.
Looks good to me.
Can be a move to RTBC.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs subsystem maintainer review

I still need to look at this and reproduce it. One thing that I see is that we're using -webkit- prefixed properties. I'd also like to see if this happens (and is fixed) in other browsers.

gauravvvv’s picture

gauravvvv commented
Issue summary: View changes
StatusFileSize
new Screenshot 2021-08-23 at 5.10.46 PM.png94.57 KB
new Screenshot 2021-08-23 at 5.13.50 PM.png178.66 KB

Added after patch screenshots for Safari and Firefox browser.
Safari

Firefox

vikashsoni’s picture

vikashsoni commented

Applied patch #4 working fine and applied successfully
After patch autofill background in primary search block is matching standard color
Thanks for the patch
for ref sharing screenshot ......

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

yashingole’s picture

yashingole commented
Assigned: Unassigned » yashingole
yashingole’s picture

yashingole commented
Assigned: yashingole » Unassigned
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new After Patch #4.png75.53 KB
new Before patch #4.png79.82 KB

Verified and tested patch #4 on Drupal 9.5.x-dev. Patch applied successfully and looks good to me.
Testing steps:
1. Goto: Appearance: Set Olivero theme
2. Goto: search keyword
3. Search any keyword
4. Repeat the search for different keywords
5. Again go to the search keyword
6. Select the suggested or previous input keyword.
7. Observe that color changes
8. Apply patch #4
9. Color does not change
Testing Result:
1. Search bar color does not change when selecting the keyword.
Screenshots are attached for reference:
Can be move to RTBC

quietone’s picture

quietone commented
Issue summary: View changes
Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs issue summary update

There are three sets of screenshots here on the same patch. A patch on Drupal 9.3.x which is not a development branch. Therefor, credit has been removed per How is credit granted for Drupal core issues.

#12 points out that some testing needs to be done. The issue summary mentions a recording but it is not in the IS. Adding tag for an IS update.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3224388-21.patch1.33 KB

Re-rolled patch #4, for d10. As it's no longer applies to D10. Please review.

Also replaced -webkit-box-shadow with box-shadow.

Shubham Sharma 77’s picture

Shubham Sharma 77 commented
Status: Needs work » Needs review
StatusFileSize
new 3224388-22.patch2.05 KB
new interdiff_21-22.txt2.42 KB
new Before-patch.png138.67 KB
new After-patch-apply-21.png136.45 KB
new After-new-patch.png140.98 KB

Verified and tested by applying the patch #21. There is some issue with border-color autofill.
I have added a patch please review it.
For ref sharing screenshots...

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs Review Queue Initiative

Issue summary update still needs to happen per #19

gauravvvv’s picture

gauravvvv commented
Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new Screen Recording 2023-02-20 at 12.30.59 PM.mov6.2 MB

I have added the screen recording. Also updated the steps to reproduce in issue summary. Please review

nayana_mvr’s picture

nayana_mvr commented
StatusFileSize
new 3224388-before-patch.mov1.19 MB
new 3224388-after-patch.mov1.02 MB

Verified the patch #22 and tested it on Drupal version 10.1.x. The patch works fine and I have added the before and after screen recordings for reference.

smustgrave’s picture

smustgrave commented
Issue summary: View changes
Issue tags: -Needs issue summary update

So my only question is

1. Should the font be fixed too
2. are we avoiding webkit?

If no to both +1 from me.

guru2023’s picture

guru2023 commented
Assigned: Unassigned » guru2023
guru2023’s picture

guru2023 commented
guru2023’s picture

guru2023 commented
Assigned: guru2023 » Unassigned
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new before-screenshot.png118.93 KB
new after-screenshot.png139.7 KB

I have tested patch comment #22 And it worked fine for me. Please see attached before and after screenshot.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Reviewed & tested by the community » Needs work
StatusFileSize
new firefox.mov1.21 MB
new safari.mov4.69 MB

Worth noting that Chrome disables autofill, but I tested this in Safari and Firefox using the issue summary steps to reproduce and could not make the bug occur. This was on an Umami install of Drupal 10.1.x. Perhaps there is additional config that is needed to reproduce that other people on this issue happened to have?

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Needs work » Postponed (maintainer needs more info)

I was only able to get an autofill box on firefox, and there was no background color issue. Moving this to postponed until we can get some reproducible results.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

smustgrave’s picture

smustgrave commented

Just following up if additional steps can be provided, else we could probably close this one out.

smustgrave’s picture

smustgrave commented
Status: Postponed (maintainer needs more info) » Closed (outdated)

Since there's been no follow up going to close out. If still a bug can always be reopened.

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.