Problem/Motivation

When using the linkit, it is possible to use linkit also on the link button in CKEditor. In this case, the default link field is replaced with an autocomplete field. The results window has a maximum size; if many results are returned by linkit, a scrollbar is displayed.

This does not work when using Claro as the admin theme, as the scrollbar is hidden. Hence, only the first 8 / 12 results are displayed to users; all the other results are hidden.

Steps to reproduce

  • Install drupal vanilla, select Claro as the admin theme;
  • Install linkit, enable the module and enable it also in the "CKEditor plugin" section of the Content authoring --> Text formats and editors page;
  • Create a bunch of nodes, e.g. 20 articles
  • Try to create a link via ckeditor, from any node.

The results will be displayed like this:

linkit claro

Proposed resolution

Remove overflow: hidden in .ui-autocomplete.

User interface changes

The scrollbar will now be displayed also for autocomplete fields.

Issue fork drupal-3219921

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

nironan created an issue. See original summary.

nironan’s picture

Status: Active » Needs review

First try; I just removed the overflow: hidden clause. Raised against 8.9, not sure if it should also be raised against 9.3

gauravvvv’s picture

StatusFileSize
new939 bytes
new512 bytes

Please make changes in .pcss file then compile the code to css. Don't write directly in css file.
Re-rolled patch #2, Added interdiff for same.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

jens.de.geit’s picture

StatusFileSize
new939 bytes

Re-roll of patch 4

Version: 9.2.x-dev » 9.3.x-dev
lauriii’s picture

Priority: Normal » Major
Issue tags: +Accessibility
timohuisman’s picture

#6 worked for me on 9.3. Tested in Safari 15.1 and Chrome 97.0.4692.99.

gauravvvv’s picture

javi-er’s picture

#6 works for me too on 9.3 on Chrome, Safari, Firefox and Edge, screenshots below:

Before:

After:

Chrome

Firefox

Safari

Edge (browserstack)

javi-er’s picture

Status: Needs review » Reviewed & tested by the community
kristen pol’s picture

Version: 9.3.x-dev » 9.4.x-dev
Issue summary: View changes
Status: Reviewed & tested by the community » Needs work
Issue tags: +Bug Smash Initiative

Thanks for testing @javi-er. I'm reviewing this issue even though it's marked RTBC because it was left open in a browser tab from a couple days ago :D

1. Patch in #6 passes tests for 9.3 but not 9.4.

2. Fix is simple and only addresses the issue in the issue summary.

3. Not sure if automated tests can be added for this.

4. Manually testing on 9.3 was successful.

I think this has to be fixed in 9.4 first, so moving back to "Needs work" for getting that patch working, but I'll check in with bugsmash team too.

I also updated the issue summary proposed resolution to reflect the patch.

kristen pol’s picture

Based on feedback from xjm in Slack, we either need:

1. Separate patches for 9.3, 9.4, and 10.

or

2. Patch for 10 that gets committed and then we back port to 9.4 and then 9.3.

kostyashupenko’s picture

Status: Needs work » Needs review
StatusFileSize
new993 bytes
new943 bytes

3219921-D9-4.patch patch can be applied now to Drupal 9.3.x normally

mchameddie’s picture

StatusFileSize
new95.8 KB

Successfully tested the D9.4.x patch at Florida DrupalCamp 2022:

  1. Followed the steps listed at top via SimplyTest.me.
  2. Tested the Linkit feature in Chrome, Firefox, and Edge. Linkit dropdown list has the scrollbar.
  3. Also tested in Chrome in responsive mode. Linkit dropdown list has the scrollbar and can be reached.

Screen capture attached.

mchameddie’s picture

Attempted to review the D10 patch at Florida DrupalCamp 2022.

There is currently no Linkit version available for D10.

kristen pol’s picture

Issue tags: +FLDC2022

Thanks for testing! Tagging for Florida Camp.

kristen pol’s picture

Confirmed the patch in #16 still applies to 9.3 and 9.4 but not to 10 (for content-header.css, see below).

IMO even though there is no D10 Linkit module yet, a patch could be created for this since the change is so simple. We might be able to test by updating the Linkit module info file and marking it for D10 and installing Backwards Compatibility and seeing if it just works :)

This can also be tested on 9.3 just to be safe.

[drupal-10.0.x-dev/10.0.x] [drupal-10.0.x-dev]$ patch -p1 < 1732.diff 
patching file core/themes/claro/css/components/breadcrumb.css
Hunk #1 succeeded at 29 with fuzz 2.
patching file core/themes/claro/css/components/breadcrumb.pcss.css
Hunk #1 succeeded at 22 (offset -2 lines).
patching file core/themes/claro/css/components/content-header.css
Hunk #1 FAILED at 12.
1 out of 1 hunk FAILED -- saving rejects to file core/themes/claro/css/components/content-header.css.rej
patching file core/themes/claro/css/components/content-header.pcss.css
Hunk #1 succeeded at 5 (offset -2 lines).
kostyashupenko’s picture

$ git checkout 10.0.x
$ git pull --rebase
$ git apply --check 3219921-D10.patch
$ -- no output --

Patch for D10 applies clearly now.

@kristen-pol in those patches there is no changes for content-header.pcss.css at all, it looks like you tried to apply wrong patch (since no idea what is 1732.diff in your patch -p1 < 1732.diff

kristen pol’s picture

Whoops. Was working on too many issues simultaneously in different tabs. Apologies for the noise.

Indeed, 3219921-D10.patch applies cleanly to Drupal 10 and 3219921-D9-4.patch applies cleanly to both Drupal 9.3 and 9.4.

Rewording the only relevant part of #19:

1. The 9.4 patch can also be tested on 9.3 just to be safe.

2. Even though there is no D10 Linkit module yet, we can probably test by updating the Linkit module info file and marking it for D10 and installing Backwards Compatibility and seeing if it just works :)

kristen pol’s picture

Issue tags: +Needs manual testing

Forgot to tag for testing per #21.

javi-er’s picture

StatusFileSize
new939 bytes

Adding patch for 9.3.x

kristen pol’s picture

Thanks @javi-er but the 9.4 patch in #15 was applying cleanly to 9.3 as well as noted in #21.

9.4 was tested in #16.

Now only Drupal 10 needs to be tested. This cannot be committed to 9.4 until the the Drupal 10 patch is tested. See explanation in #21 on how to possibly hack Linkit to test this.

andy-blum’s picture

Tried to squeeze in the D10 review before end of day today, but Linkit needs more work. Here's the issue if anyone wants to try to patch linkit AND D10 to test.

ckrina’s picture

Status: Needs review » Reviewed & tested by the community

In the last Claro meeting we agreed we'd apply the fix for 9.4 to D10 too without testing for now due to the difficulty to do that, since we can't right now without a D10 Linkt version. If we see we need a different fix for D10 we'll open a new issue for that once we know how to reproduce it.

I've just tested the 9.4 and 9.3 patches with Linkit and they apply cleanly and solve the problem. Also, the code solution looks good for me. Marking as RTBTC.

  • lauriii committed 5061005 on 10.0.x
    Issue #3219921 by nironan, kostyashupenko, javi-er, Gauravmahlawat, jens...

  • lauriii committed bc17f2f on 9.4.x
    Issue #3219921 by nironan, kostyashupenko, javi-er, Gauravmahlawat, jens...

  • lauriii committed d79be8b on 9.3.x
    Issue #3219921 by nironan, kostyashupenko, javi-er, Gauravmahlawat, jens...
lauriii’s picture

Version: 9.4.x-dev » 9.3.x-dev
Status: Reviewed & tested by the community » Fixed
Issue tags: -Needs manual testing

Committed 5061005 and pushed to 10.0.x. Also committed patches to 9.4.x and 9.3.x. Thanks!

Status: Fixed » Closed (fixed)

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