Problem/Motivation

Fix the “X” icon position and remove the default "webkit-appearance" on the search input field

Steps to reproduce

  1. Update the module to 4.0.0 or a newer version.
  2. Navigate to the "/admin/modules" page.
  3. When you type anything in the input search, two "x" buttons are visible on Chrome and Safari. Also, the gray "X" button position is incorrect. Please check the below image:
    2023-07-04/input-type-search-close-button-issue.png

Proposed resolution

Need to change in CSS.

Command icon Show commands

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

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

Comments

Shyam_Bhatt created an issue. See original summary.

shyam_bhatt’s picture

Assigned: shyam_bhatt » Unassigned
Status: Active » Needs review
StatusFileSize
new1.1 KB
new78.17 KB

Adding a patch to fix the issue.

After patch:
2023-07-04/3372272-1-after.png

Needs review.

tanuja bohra’s picture

StatusFileSize
new22.39 KB
new20.43 KB

Verified the #2 patch on 9.5.8, not able to reproduce the double cross icon issue on chrome, but the grey cross icon alignment is fixed.

smustgrave’s picture

Status: Needs review » Needs work

Don't see the need of an extra X lets just remove and test.

smustgrave’s picture

Issue tags: +Novice

Update

tanuj.’s picture

StatusFileSize
new275.46 KB
new268.54 KB
new277.45 KB

Tested and verified this issue on drupal 10.2 and patch #2 works fine and fixes the issue of 'X' icon alignment in search bar and also removes the additional 'X' icon which shows up on chrome and safari browser as stated in #4. Attaching before and after screenshots for Firefox and chrome browser. RTBC++

tanuj.’s picture

Status: Needs work » Reviewed & tested by the community
smustgrave’s picture

Status: Reviewed & tested by the community » Needs work

See #4

tanuj.’s picture

Status: Needs work » Needs review

That's what the patch does it removes the extra X icon from chrome as it is generated by default for input[type="search"] field in chromium based browsers but this extra X is not present in Firefox browser.

--- a/css/module_filter.modules_tabs.css
+++ b/css/module_filter.modules_tabs.css
@@ -109,6 +109,12 @@
 .modules-tabs__pane input.table-filter-text {
   width: 100%;
 }
+.modules-tabs__pane input[type="search"]::-webkit-search-decoration,
+.modules-tabs__pane input[type="search"]::-webkit-search-cancel-button,
+.modules-tabs__pane input[type="search"]::-webkit-search-results-button,
+.modules-tabs__pane input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance:none;
+}

This code present in the patch/MR removes that extra X from chromium based browsers, also this extra X icon present by default doesn't update the search results and simply clears the text from field.

smustgrave’s picture

Status: Needs review » Needs work

No we can keep that and remove the X this module is adding.

jonathan1055’s picture

I was asked to review this issue but it's not clear exactly what the intended change is. There are two MRs, 35 and 36. Are they both trying to do the same thing, but in different ways?

Just noting that MR35 opened by Tanuj. in #6 is very similar but not identical to patch-1 by Shyam_Bhatt in #2

MR36 by smustgrave is very different to both of them.

smustgrave’s picture

36 I'm removing all the custom logic for the X clear button and just letting browsers handle the clear. Seems like we were just reinventing the wheel.

anita verma’s picture

Status: Needs work » Needs review
StatusFileSize
new43.52 KB

Tested MR on Drupal 9 and php version 8.1 . It is working fine.
filter

Thank you

jonathan1055’s picture

Title: Fix the “X” icon position and remove the default "webkit-appearance" on the search input field » Remove the additional X clear button
Status: Needs review » Reviewed & tested by the community

I have tested this on Mac with Safari 16.6, Chome 120.0 and Firefox 121.0.

The exitsing behavior (without the mr)

On Safari nothing is shown initially but when you start typing in the field then a small central x in a circle and larger off-center X not in a circle both appear. Each of these can be clicked with mouse/trackpad and the text is removed. The large X also resets the filtered rows immediately, but clicking the small x in the circle does not reset the filtered rows. Neither of the Xs take focus when using keyboard tab key. Same behavior for all three pages (install, uninstall, permissions).
[Oddly I observed one time on the permissions tab there was initially a large X even before typing, but this is now not the case and I can't replicate it].
With Chrome the behavior is is exactly the same. Visually the only difference is the small central x is not in a circle.
On Firefox, when typing a value there is no small x in circle, only the larger off-center X. Clicking the X resets the filtered rows immediately. Same on all three pages.

With the new branch and MR changes

Safari - nothing showing initialy, start typing and get small x in circle. Clicking it now does reset the filtered rows. Same for all three - install, uninstall and permissions.
Chrome is the same except the single x in not in a circle. Same reset behavior.
Firefox now has no x even after typing text. Same on all three pages. Therefore no 'clear' functionality. Is this a problem? It is a loss of functionality but this is due to the browser not providing it. I think it's ok, as it is a very simple operation to erase the text via cursor and keyboard.
[I am sure I also one time saw a 'clear' link appear after the entry box, when typing a value. Cannot replicate this now]

I've renamed the issue to reflect the change being done. RTBC for merge request 36.

jonathan1055 changed the visibility of the branch 3372272-fix-the-x to hidden.

smustgrave’s picture

Status: Reviewed & tested by the community » Fixed

Update

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.