Autocomplete input text can visibly overflow under magnifier icon

Not sure if we have to provide a fix for extrasmall modifier

Tested patch from #2 for mobile and desktop resolutions in Chrome, FF, Safari and IE browsers. Result is OK

Please tell the step to reproduces this issue. I have try to reproduces this issue but not able to reproduces.

I got the following erros when applying patch #2

error: patch failed: core/themes/claro/css/components/autocomplete-loading.module.css:79
error: core/themes/claro/css/components/autocomplete-loading.module.css: patch does not apply
error: patch failed: core/themes/claro/css/components/autocomplete-loading.module.pcss.css:26
error: core/themes/claro/css/components/autocomplete-loading.module.pcss.css: patch does not apply

Therefore, i couldn't create an interdiff.

I created a new patch based on the #2, i added margin to fix the issue at #5.

Great work everyone, the text no longer appear underneath the magnifying glass icon, but stops before. Also, the tag and text fields have the same width.

1. +++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
   @@ -26,7 +26,14 @@
   +  --form-autocomplete-side-padding: calc(2.5625rem - var(--input-border-size));
   +  --form-autocomplete-side-margin: calc(-2.5625rem + var(--input-border-size) + var(--input-padding-horizontal));
   

   Maybe we should make it specific that this is to accommodate the magnifier icon. Maybe something like --form-autocomplete-magnifier-side-padding would work?

2. +++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
   @@ -26,7 +26,14 @@
   +  margin-right: var(--form-autocomplete-side-margin);
   

   We should have RTL rule for this.

3. +++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
   @@ -26,7 +26,14 @@
   +  padding-right: var(--form-autocomplete-side-padding);
   +  margin-right: var(--form-autocomplete-side-margin);
   

   We need /* LTR */ comment here because these styles are overridden in the RTL styles.

Worked on #12.

Please review this patch.

Thanks!

I have updated this patch, please review.

Thanks!

@bnjmnm, I have uploaded interdiff of patch #16 and #17

Please review.

Thanks!

Patch #17 works good to me . Both when we insert from ltr and rtl. Below adding the screenshot.

Test Steps:
1. Instal Drupal 9.1
2. Enable Claro Theme.
3. Apply the patch 3163127-17.patch
3. Create Article Content type.
4. Add long text(100 characters) in tags field and check.

Results:
Tested and verified after applying the patch 3163127-17.patch. And its working as expected.

1. +++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
   @@ -26,7 +26,14 @@
   +  --form-autocomplete-magnifier-side-padding: calc(2.5625rem - var(--input-border-size));
   

   Where does 2.5625rem come from? Should this be calculated based on --input-padding-horizontal and the icon size?

2. +++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
   @@ -26,7 +26,14 @@
   +  --form-autocomplete-magnifier-side-padding: calc(2.5625rem - var(--input-border-size));
   +  --form-autocomplete-side-margin: calc(-2.5625rem + var(--input-border-size) + var(--input-padding-horizontal));
   

   We should rename this using the same pattern. This would become --form-autocomplete-magnifier-side-margin.

I have updated the patch after replacing --form-autocomplete-side-margin to --form-autocomplete-magnifier-side-margin.
I am not sure about the first recommendation, @lauriii, can you provide a lil more information about that?

I have tested the above patch on 9.2.x dev version ,the patch works fine for claro theme.
Before patch
After Patch .RTBC

Re-rolled from #28

Patch #31 is applied and working on 9.2.x-dev.
I have tested claro theme.

Thanks!

Fixed the "custom commands failed" issues. Kindly review

Missing one check. Updated the patch.

Custom commands failed please re-work.

fixed custom commands failed issue please review.

Applied the patch #38 on 9.3.x and it works fine. Adding screenshots below.

Moved to RTBC

We should still address #27. It's important that we document what that value is based on so that if someone is updating the designs, they know how to recalculate that value.

As per the comment #27, calculating the padding using available variables

Verified and tested patch#45 on 9.5.x-dev. Patch is applied successfully.

Test Steps:
1. Enable Claro Theme.
2. Apply the patch
3. Create Article Content type.
4. Add long text in tags field
5. Verify autocomplete input text does not visibly overflow under magnifier icon

Test Results:
Autocomplete input text does not visibly overflow under magnifier icon for Claro theme.

Before Patch:

After Patch:

Moving to RTBC

Re-uploading the patch with minor fix. Ran code check locally which came out clean.

Patch #50 tested and Applied successfully on Drupal 9.5.x.

Before patch:

After Patch:

Verified and tested patch#50 on 9.5.x-dev. Patch is applied successfully.

Test Steps:
1. Enable Claro Theme.
2. Apply the patch
3. Create Article Content type.
4. Add long text in tags field
5. Verify autocomplete input text does not visibly overflow under magnifier icon

Test Results:
Autocomplete input text does not visibly overflow under magnifier icon for Claro theme.

Verified and tested patch#50 on 9.5.x-dev for me. The patch is applied successfully.

D10 version needed
At this time we need a D 10.1.x patch or MR for this issue.

Hi, reroll the patch for the version 10.1.x and attaching the reroll_diff

The last patch doesn't apply

As patch #62 is not applied i trued to fix patch #61.
by using yarn build.

Verified patch #64 on Drupal 10.1.x-dev.
Patch applied cleanly.

Autocomplete input text is looking fine now in both LTR and RTL
Refer to the attached screenshots

RTBC +1

Applied patch #64 works fine now text in input not overflow the icon on Drupal 10.1.x-dev
Refer to the screenshot

Made changes as per the comment #68.
Please review.

I have updated the margin-right with margin-inline-end and margin-left with margin-inline-start and same for padding. Attached interdiff for same. Please review.

Try to fix ccf error in #72

Thanks for the work on this issue.

@gaurav-mathur Please check the comments to see if testing is needed. If it has been tested, you don't need to retest. This is a waste of everyone's time. Thanks.

@manojkumar_97 Please don't move to RTBC if the patch has been tested but the code hasn't been reviewed. Thanks. See the core gates here:

https://www.drupal.org/node/1203498

I have created a Patch for the Autocomplete input text can visibly overflow under the magnifier icon. Please Review

added updated patch and fixed ccf #77

try to fixed CCF #78

Updated short hand properties in #74, Attached interdiff for same.

Hi Gauravvvv,
The patch applied cleanly.
Autocomplete input text is looking fine now Here are the screenshots.

Removing credit for bad rerolls

This appears to need an issue summary also.

Any more work needs to be done here?

@smustgrave what needs to be updated in the issue summary?

IS is incomplete, no steps to reproduce, proposed solution, if UI change screenshots are needed.

Issue summary updated.

Still has TBD in the proposed solution.

1. Converted to merge request
2. Resolved conflicts
3. Updated issue summary

Thanks! My CSS is poor at best (was more helping to move forward) but thankfully simple enough change for me :) Confirmed, changing <html> dir attribute to rtl and it looks fine still after this change.

Does this mean we should move the calc's from
:root {
into the
.js { & .form-autocomplete {
?

I think yes looking at other pcss files in core, so I have gone ahead and done that.

Added LTR and RTL views after the changes.

Removing issue summary tag as that appears to be updated in #94

Applying the MR I'm getting the same results as the after screenshots provided in the summary and see all threads are resolved.

LGTM

Committed and pushed 90f8dd194f to 11.x and 351c0873ee to 11.0.x and f9e6633c9a to 10.4.x and 42a97ff4f7 to 10.3.x. Thanks!