Problem/Motivation
First encountered this some years ago, but finally got around to getting to the root cause.
From jQuery 3.3.0 onwards there is a mostly undocumented "bugfix" that breaks .position().
This affects autocomplete fields that are in tables.
See
- https://github.com/jquery/jquery/pull/3972
- https://github.com/jquery/jquery/issues/3984
- https://github.com/jquery/api.jquery.com/issues/1081
Steps to reproduce
- Enable modules Entity reference and Multifield table (and their dependencies)
- Add a multifield field to a content type with the table widget
- To the multifield add an entity reference field with the autocomplete widget
- Try to create a new node of previously used content type, ensure multifield is displaying as a table, type into entity reference autocomplete field
- Observe autocomplete dropdown appears in the correct place (under the input box)
- Enable jQuery 3.3+
- Repeat step 4
- Observe autocomplete dropdown appears in the wrong place (somewhere near the top of the page)
Proposed resolution
The workaround is to use .offset() instead.
Remaining tasks
Fix it.
User interface changes
Autocomplete dropdown appears in the correct place again instead of at the top of the page.
API changes
None.
Data model changes
None.
Release notes snippet
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | 3325927-13_noop.patch | 390 bytes | mcdruid |
| #10 | 3325927-10.patch | 4.18 KB | mcdruid |
| #10 | interdiff-3325927-6-10.txt | 1.07 KB | mcdruid |
| #6 | jquery_update-3325927-6.patch | 3.04 KB | mustanggb |
| #2 | drupal-3325927-2.patch | 1020 bytes | mustanggb |
Comments
Comment #2
mustanggb commentedAnd a patch.
Comment #3
mustanggb commentedComment #4
mcdruid commentedThanks! Can we address this in jquery_update instead?
Apart from anything else, the lack of any JS testing in D7 means it'd be preferable not to change D7 core to cater for the small (?) number of sites running up-to-date jQuery 3.x
Comment #5
mustanggb commentedSure, would you suggest doing something similar to
jquery_browser.js?Comment #6
mustanggb commentedNew patch against jquery_update.
Comment #8
mustanggb commentedUnrelated test failure?
If not need guidance.
Comment #9
mcdruid commentedErm, yeah I'm not sure why that's happened.
A quick way to try and see what's going on is something like this (with and without the patch applied):
I can imagine the patch moving things around in $libraries a little, but don't see how it'd cause these specific assertions to fail.
Generally the patch looks like the right sort of idea, but I've not looked too closely yet.
I've queued the tests to re-run. If the result's the same we may need to look closely using an actual drupalci instance.
Comment #10
mcdruid commentedI do have a local drupalci I can start testing this with (see https://www.drupal.org/drupalorg/docs/drupal-ci/running-drupalci-locally ).
Here's a quick tweak to the patch just to see if the main drupalci will give us a clue about what's going wrong though...
Comment #12
mcdruid commentedOkay, so looks like the admin form submission to set the initial version for the test isn't working for some reason... not sure why that would be, but it gives us somewhere to start.
Comment #13
mcdruid commentedI think this is happening without any of the changes from this issue.
Here's a noop patch to check that.
If so, I don't understand why ... but it'd be good to know.
Comment #15
mustanggb commented@mcdruid
Unrelated test failure aside, is there anything that needs changing with the actual patch?
Comment #16
mcdruid commentedFiled #3327465: Fix broken tests to fix the broken tests. I don't want to commit / release anything until that's resolved.
If this patch fixes the issue with autocomplete that you initially noticed, that's great. Guessing it wouldn't be an easy thing to test in D7?
Will review this properly once tests are passing again; sorry for the delay.
Comment #17
mcdruid commentedRe-testing #6 now that #3327465: Fix broken tests is fixed.
Comment #18
mcdruid commentedTests look good for #6 now.
@MustangGB can you please provide simple steps for how to review the fix manually?
I tried adding search_autocomplete to a vanilla D7 site with jquery_update bringing in the latest jQuery 3.6.x but it wasn't apparent that there was a problem with positioning in the UI.
Comment #19
mustanggb commentedSimple? Not sure about that.
Are you sure you tested with the autocomplete in a table?
Nevertheless, added some more in-depth repro steps to the description.
Comment #20
mustanggb commentedComment #21
mcdruid commentedThanks for the detailed steps - took me quite a bit of fiddling around to get the multifield table widget working, but I was eventually able to reproduce the problem with autocomplete.
The fix looks good.
Sorry to be pedantic, but there is one thing I'd like to tweak though; I was sure we'd made some changes fairly recently relating to jQuery's position() and eventually remembered that I was thinking of SA-CORE-2022-001:
https://git.drupalcode.org/project/drupal/-/commit/c05bb17ce3a697cc36221...
We used quite a specific filename for that backport, and it bothers me slightly that the patch here is specifically addressing an issue with autocomplete (even more specifically
Drupal.jsAC.prototype.populatePopup) but we're just calling it "position fix":The other similar shim that jQuery Update recently added is called jquery_browser.js but that does actually provide
jquery.browserif it's no longer provided by jQuery.Can we please name this shim / fix more specifically based on what it's actually doing?
Maybe more like "jQuery Update Autocomplete Position fix".
Comment #22
mustanggb commentedI originally considered
jquery_update.autocomplete.fix, meaning all fixes related to autocomplete.But as the thing that changed was the functionality of
position()thought it made more sense to go withjquery_update.position.fix, meaning all fixes related to position, it just so happens that the only place we've found to fix so far is in autocomplete, but in theory fixes for other elements could also go in this file.I'd not considered
jquery_update.autocomplete_position.fix, because as previously mentioned I wanted to keep the door open to other fixes relating toposition()to have a place to go.If you're still sure you'd like to change it I will update the patch, please let me know.
Comment #23
mcdruid commentedYup, okay that makes sense. Happy to leave it as it is.
Will do a final review and commit this ASAP. Thanks!
Comment #25
mcdruid commentedThank you!
Will get a new point release out soon (before marking the old 7.x-2.x release as unsupported).