Problem/Motivation

Using the autocomplete field widget in a block content type with layout builder is inaccessible due to a styling issue with the autocomplete results.

Steps to reproduce:
1) Add an entity reference field to a block type
2) Add that block type via Layout builder
3) Start typing in the ER field and view the resulting list.

Screenshot of bug

Proposed resolution

Fix the styling
Check if this affects other widgets

Screenshot with patch in #19:

Remaining tasks

User interface changes

Better UI for autocomplete dropdown in the off-canvas window.

CommentFileSizeAuthor
#40 3077300-nr-bot.txt179 bytesneeds-review-queue-bot
#36 usable-off-canvas-entity-reference-3077300-36.patch2.45 KBbwaindwain
#35 usable-off-canvas-entity-reference-3077300-34.patch2.36 KBxaqrox
#33 usable-off-canvas-entity-reference-3077300-33.patch2.63 KBbwaindwain
#31 usable-off-canvas-entity-reference-3077300-31.patch2.16 KBbwaindwain
#29 usable-off-canvas-entity-reference-3077300-29.patch2.16 KBbwaindwain
#23 after-patch.png17.2 KBsulfikar_s
#23 before-patch.png9.84 KBsulfikar_s
#20 ksnip_20200701-120044.png20.23 KBbwaindwain
#19 usable-off-canvas-entity-reference-3077300-19.patch2.16 KBbwaindwain
#15 Screenshot 2020-06-24 at 2.26.38 PM.png253.27 KBkunalgautam
#13 ksnip_20200602-143435.png30.86 KBbwaindwain
#12 autocomplete-fix.png7.94 KBtlo405
#9 usable-off-canvas-entity-reference-3077300-9.patch1.98 KBbwaindwain
#5 usable-off-canvas-entity-reference-3077300-5.patch1.37 KBnbaosullivan
#3 usable-off-canvas-entity-reference-3077300-3.patch667 bytesnbaosullivan
Screen Shot 2019-08-27 at 9.02.05 am.jpg140.67 KBacbramley

Comments

acbramley created an issue. See original summary.

acbramley’s picture

acbramley commented

The css that's causing this is https://git.drupalcode.org/project/drupal/blob/8.8.x/core/themes/stable/...

It looks like https://git.drupalcode.org/project/drupal/blob/8.8.x/core/themes/stable/... is trying to fix that but the previous rule sets the background colour of the li AND the a underneath ui-autocomplete

nbaosullivan’s picture

nbaosullivan commented
StatusFileSize
new usable-off-canvas-entity-reference-3077300-3.patch667 bytes

I had to quickly make this usable for an 8.7.x project, but this should apply fine to 8.8.x too.

nbaosullivan’s picture

nbaosullivan commented
Status: Active » Needs review
nbaosullivan’s picture

nbaosullivan commented
StatusFileSize
new usable-off-canvas-entity-reference-3077300-5.patch1.37 KB

Updated patch to apply same fix to off-canvas.form.cssin themes/stable/css/core/dialog/off-canvas.form.css

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

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Jtporter9’s picture

Jtporter9 commented

This issue is larger than just the autocomplete field. drupal-off-canvas has selectors that are much too aggressive, and effect more than just autocomplete. See https://www.drupal.org/project/drupal/issues/3087490#comment-13306538

bwaindwain’s picture

bwaindwain commented

duplicate of #3080895.

bwaindwain’s picture

bwaindwain commented
StatusFileSize
new usable-off-canvas-entity-reference-3077300-9.patch1.98 KB

I like this solution a bit better than #3080895.

But the circle background-image is missing (indicating an autocomplete). Here's patch #5 with some extra bits that bring it back.

I agree with @Jtporter9 in #7. This seems a bit hack-ish.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Needs review » Needs work
Issue tags: +Blocks-Layouts, +Needs screenshots

If this is too specific and should be marked as a duplicate, let's do that.
Otherwise, this needs screenshots of the fix.

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

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

tlo405’s picture

tlo405 commented
StatusFileSize
new autocomplete-fix.png7.94 KB

Patch in #9 worked perfectly for me:
autocomplete-fix

bwaindwain’s picture

bwaindwain commented
StatusFileSize
new ksnip_20200602-143435.png30.86 KB

screenshot of #9

kunalgautam’s picture

kunalgautam commented
Assigned: Unassigned » kunalgautam
kunalgautam’s picture

kunalgautam commented
Assigned: kunalgautam » Unassigned
Status: Needs work » Needs review
StatusFileSize
new Screenshot 2020-06-24 at 2.26.38 PM.png253.27 KB

Patch #9 is applied successfully for Drupal 9.1 and working fine.

patch scheenshot

Only local images are allowed.

pameeela’s picture

pameeela commented
Issue summary: View changes
Issue tags: -Needs screenshots

Added screenshot from #12 to the IS and removing tag.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Needs review » Needs work

@kkalashnikov please don't upload pictures of git output, it does not help move the issue forward. The testbot will fail the patch if it doesn't apply.

One remaining point:

+++ b/core/misc/dialog/off-canvas.form.css
@@ -116,18 +116,29 @@
+#drupal-off-canvas .ui-autocomplete-input {
...
+  background-position: 100% center; /* LTR */

This either needs a corresponding RTL property, or the comment needs to be removed (since it's center)

kunalgautam’s picture

kunalgautam commented

@tim.plunkett Thanks for reviewing and sorry for your concern

Actually I had manually run dispatcher for Drupal 9.1 for patch #9 and this is not a git output, I applied this patch using composer on my local machine and the attached screenshot of it.

Thanks,
Kunal Gautam

bwaindwain’s picture

bwaindwain commented
StatusFileSize
new usable-off-canvas-entity-reference-3077300-19.patch2.16 KB

Here's patch from #9 updated to handle RTL properly.

bwaindwain’s picture

bwaindwain commented
Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new ksnip_20200701-120044.png20.23 KB

Added new screenshot to issue description which demonstrates patch #19 in LTR and RTL.

pameeela’s picture

pameeela commented
Issue tags: +Bug Smash Initiative

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

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

sulfikar_s’s picture

sulfikar_s commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new before-patch.png9.84 KB
new after-patch.png17.2 KB

Hello I've tested the patch in #19. It applied cleanly. I'm attaching the before and after of the patch below,

before,
before-patch

after,
after-patch

Also I think he handled the LTR properly than his previous patch in #9, So RTBC

pameeela credited AllieRays.

pameeela credited Pat Redmond.

pameeela credited komalk.

pameeela’s picture

pameeela commented

Closed #3049565: Fix autocomplete dropdown background in layout builder sidebar as duplicate so added the contributors here for credit.

catch’s picture

catch
he/him
Primary language English
commented
Status: Reviewed & tested by the community » Needs work

This is failing some code style checks, see https://www.drupal.org/pift-ci-job/1925395

bwaindwain’s picture

bwaindwain commented
Status: Needs work » Needs review
StatusFileSize
new usable-off-canvas-entity-reference-3077300-29.patch2.16 KB

Here's an updated patch.

When I ran commit-code-check.sh locally it did not give any errors. It said "passed" for both css files. Strange!

bwaindwain’s picture

bwaindwain commented
Status: Needs review » Needs work
bwaindwain’s picture

bwaindwain commented
Status: Needs work » Needs review
StatusFileSize
new usable-off-canvas-entity-reference-3077300-31.patch2.16 KB

ok, lets try again

bwaindwain’s picture

bwaindwain commented
Status: Needs review » Needs work
bwaindwain’s picture

bwaindwain commented
Status: Needs work » Needs review
StatusFileSize
new usable-off-canvas-entity-reference-3077300-33.patch2.63 KB

arg

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

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

xaqrox’s picture

xaqrox
he/him
Primary language English
Location Washington, D.C.
commented
StatusFileSize
new usable-off-canvas-entity-reference-3077300-34.patch2.36 KB

Added in the style for the active state.

bwaindwain’s picture

bwaindwain commented
StatusFileSize
new usable-off-canvas-entity-reference-3077300-36.patch2.45 KB

Good catch @xaqrox

Fixed the patch paths and removed a few unnecessary rules to keep up with Drupal core.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 3077300-nr-bot.txt179 bytes

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

pameeela’s picture

pameeela commented
Status: Needs work » Closed (cannot reproduce)
Related issues: +#3291797: Refactor Drupal 10 settings tray / off-canvas to use modern CSS

This is no longer an issue, possibly was fixed as part of #3291797: Refactor Drupal 10 settings tray / off-canvas to use modern CSS