Problem/Motivation

This is follow up issue for comment#16293746

In preparation of upgrading to Drupal 11, we're upgrading our contrib modules to versions that support D11. After upgrading select2 from 8.x-1.15 to 2.0.0 we had several CSS issues.

select2 issue on Claro theme

Drupal Core: 10.5.4

I'm wondering if the changes were done and only tested on D11? According to the project page, version 2.0.0 supports both D10 & D11.

Steps to reproduce

Use Drupal `>=10.4` and upgrade `select2` from 8.x-1.15 to 2.0.0.

Proposed resolution

Fix styling for Claro theme.

CommentFileSizeAuthor
#9 select2-claro-3551995-8.patch5.07 KBsinn
#8 text-visibility-issue.png28.86 KBesha_kundu
#8 spacing-issue-with-cursor.png19.41 KBesha_kundu
#8 after-patch-select-ui.png55.45 KBesha_kundu
#5 select2-v2-patched.png259.46 KBsinn
#5 select2-v2-without-patch.png141.52 KBsinn
#5 select2-v1.png232.18 KBsinn
#5 select2-3551995-claro_styling-5.patch3 KBsinn
issue-on-claro.jpg27.08 KBusmanjutt84

Issue fork select2-3551995

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:

About issue forks

Comments

usmanjutt84 created an issue. See original summary.

usmanjutt84’s picture

usmanjutt84
he/him
Primary language Urdu
Location Islamabad
commented
Issue summary: View changes

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

sinn opened merge request !54

sinn’s picture

sinn commented
StatusFileSize
new select2-3551995-claro_styling-5.patch3 KB
new select2-v1.png232.18 KB
new select2-v2-without-patch.png141.52 KB
new select2-v2-patched.png259.46 KB

The MR has been provided.

Also attach here the patch from MR to be used in composer.

sinn’s picture

sinn commented
Status: Needs work » Needs review

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

esha_kundu’s picture

esha_kundu commented
StatusFileSize
new after-patch-select-ui.png55.45 KB
new spacing-issue-with-cursor.png19.41 KB
new text-visibility-issue.png28.86 KB

Hello,
I found the repository has a SCSS file; however, only CSS file changes are present in MR!54. Additionally, after applying the MR!54 I identified a few other UI problems like

  • When the select2 field is empty, the placeholder text isn't visible properly.
  • The text and cross-icon don't have any space in between
  • When the cursor is visible, it also has no space with the select item

I've updated the MR!54 with the fixes for the above UI problems and also added scss file changes. On applying the earlier changes, there was UI issue in Drupal 11. I've added fixes for the same.
Attaching SS for reference.
Thanks

sinn’s picture

sinn commented
StatusFileSize
new select2-claro-3551995-8.patch5.07 KB

Yeah, the fixes in #8 solve issue with hidden absent option.

The patch to be used in composer is attached.