Contrib.social

Autocomplete field search results styling issues

Open on Drupal.org →
Created on 28 May 2021, over 3 years ago
Updated 1 December 2023, 12 months ago

Problem/Motivation

1. When text is wider than an autocomplete field, the results list is wider than the field.

2. For themes other than Claro and Seven, when in a popup, the autocomplete results are "hidden" and require scrolling within the popup.

Steps to reproduce

1. clean install drupal, I use a standard profile

2. claro as an admin theme

3. add a new field to the article content type,

4. I use a content reference with the autocomplete widget.

5. Add the content reference field to article content type and select page as the referenced types

6. create a super long title with a basic page content type

7. test the autocomplete widget, see the below screenshot demonstrating the issue

OLD Testing steps with the linkit module (which I believe should be added to the linkit module.)

1. Install Drupal with Umami profile.

2. Install Linkit module.

3. Configure Full HTML to use Linkit.

4. Make theme the admin theme.

5. Created 3 pages with very long titles that have "test" in them.

6. Edit content in Full HTML format, add a link, and search using "test".

7. Result: See slightly wider results. Expected: Results are same width as autocomplete field.

8. Search using "about".

9. Result: Width is same width as autocomplete field as expected.

10. Note also that for Claro and Seven, the results list goes over the button and extends beyond the popup when there are many results whereas the other themes show some of the results hidden and require scrolling. This could be fixed at the same time.

Proposed resolution

Update CSS and/or JS to ensure width is correct and results are visible.

Remaining tasks

1. Create patch
2. Review patch
3. Commit

User interface changes

Autocomplete results width will be same width as autocomplete field and results will fully visible.

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Javascript  →

Last updated 2 days ago

Created by

🇺🇦Ukraine vorona olya

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment almost 2 years ago →
    🇺🇸United States smustgrave

    This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request → as a guide.

    Seems like a perfect scenario for a test.

  • Comment 12 months ago →
    🇯🇴Jordan Odai Atieh Amman

    Rerolled patch for 10.1.5

  • Status changed to RTBC 12 months ago
  • Comment 12 months ago →
    🇮🇳India adwivedi008

    I have tested patch #28 and it applied cleanly for drupal 11.x
    The patch worked properly for me & resolved the issue.

    Steps to reproduce:-

    1. Install Drupal, using standard profile.

    2. Use Claro as an admin theme.

    3. add a new field to the article content type.

    4. I used a content reference with the autocomplete widget.

    5. Add the content reference field to the article content type and select the page as the referenced type.

    6. Create a super long title with a basic page content type.

    7. Tested the autocomplete widget.

    See the below screenshot demonstrating the before and after patch.

    It fixes the issue so moving the issue to RTBC

  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update 12 months ago
    Patch Failed to Apply
  • Status changed to Needs work 12 months ago
  • Comment 12 months ago →
    needs-review-queue-bot

    The Needs Review Queue Bot → tested this issue.

    While you are making the above changes, we recommend that you convert this patch to a merge request → . Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

  • First commit to issue fork.
  • Merge request !5606Resolve #3216228 "Autocomplete field search" → (Closed) created by djsagar
  • Comment 12 months ago →
    System Message
  • Merge request !5607Resolve #3216228 → (Open) created by djsagar
  • Status changed to Needs review 12 months ago
  • Comment 12 months ago →
    🇮🇳India djsagar
  • Status changed to Needs work 12 months ago
  • Comment 12 months ago →
    🇺🇸United States smustgrave

    Please read the tags also. This was tagged for tests which are still needed.

    Just plain rerolls may no longer receive credit I believe just fyi

    Thanks!

  • Comment 12 months ago →
    🇮🇳India djsagar

    Hi @smustgrave,

    Certainly, I understand the importance of considering the tags, especially when testing is mentioned. Thank you for pointing it out. I apologize for any oversight in my initial response.

    Follow the same steps which is provided in #28 and attaching the attachment, i hope this will fine.

    Before patch

    After patch

    Thanks!

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024