Remove the additional X clear button

Adding a patch to fix the issue.

After patch:

Needs review.

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.

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

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++

See #4

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.

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

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?

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.

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

Thank you

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 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 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.

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

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