Conflict with Linkit module .ui-autocomplete.ui-menu

Created on 17 June 2024, 5 months ago
Updated 18 July 2024, 4 months ago

Problem/Motivation

I was trying to use Linkit and I was having a missing background color problem.

After investigation I used this patch that was supposed to fix it: https://www.drupal.org/files/issues/2024-05-21/linkit-ckeditor-position-...
Link to the original issue: https://www.drupal.org/project/linkit/issues/3381766 🐛 Linkit Dialog list has no background color Postponed: needs info

But after installing it, there was still an issue for me.

After another investigation I saw that the CSS of the Seeds Toolbar module was interfering with the .ui-autocomplete.ui-menu style, adding a position: fixed to it.

This was in conflict with the fix made for the linkit module, so maybe the css selector given above is to generic.

Steps to reproduce

  1. Install Linkit and Seeds Toolbar
  2. Configure a linkit profile in CKEditor 5
  3. Try to add a link and the background color of the linkit element is supposed to be transparent.

Proposed resolution

For a quick fix I just edited the line 81 as :
body:not(.responsive-preview-frame) .ui-autocomplete.ui-menu:not(.linkit-ui-autocomplete) {

I don't have the time to investigate more at the moment for a more generic fix (avoiding quoting linkit directly here), but at least there is a workaround patch available for everyone needing this.

Remaining tasks

A more robust fix in the css selector.

🐛 Bug report
Status

Fixed

Version

2.0

Component

Code

Created by

🇫🇷France Quentin Harelle

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024