Multiple Page Reference fields lead to JS errors

[dreerr]

Short description of the issue

With multiple page reference fields the select button fades in and out again.

Expected behavior

select button should only fade in.

Actual behavior

select button fades in and then out again.

Optional: Screenshots/Links that demonstrate the issue

https://processwire.com/talk/applications/core/interface/file/attachment.php?id=12288

Steps to reproduce the issue

Create multiple page refs with different options

Setup/Environment

Server Details

ProcessWire: 3.0.80
PHP: 7.1.4
Webserver: Apache/2.4.18 (Unix)
MySQL: 5.7.17

Server Settings

allow_url_fopen: 1
max_execution_time: 120 (changeable)
max_input_nesting_level: 64
max_input_time: 60
max_input_vars: 1000
memory_limit: 256M
post_max_size: 8M
upload_max_filesize: 2M
xdebug:
xdebug.max_nesting_level: 256

mod_rewrite: 1
mod_security: *confirmed off

GD: bundled (2.1.0 compatible)
GIF: 1
JPG: 1
PNG: 1

EXIF Support: 1
FreeType: 1
Imagick Extension:

Module Details

AdminOnSteroids: 1.6.1
AutodetectLanguage: 1.0.3
AvbImage: 0.0.4
CronjobDatabaseBackup: 1.1.5
CroppableImage3: 1.1.15
DiagnoseDatabase: 0.0.2
DiagnoseFiles: 0.0.1
DiagnosePhp: 0.0.7
DiagnoseWebserver: 0.0.1
EmailObfuscation: 1.1.0
FieldtypeAdminCustomPagesSelect: 1.0.0
FieldtypeCroppableImage3: 1.1.7
FieldtypeFunctional: 0.0.1
FieldtypeMultiplier: 0.1.1
FieldtypePadNotes: 0.0.3
FieldtypeRepeaterMatrix: 0.0.4
FieldtypeTable: 0.1.7
FieldtypeTextareas: 0.0.7
HannaCodeHelper: 0.5.0
ImageExtra: 1.0.6
InputfieldCroppableImage3: 1.1.8
InputfieldFunctional: 0.0.1
InputfieldMultiplier: 0.1.1
InputfieldPadNotes: 0.0.3
InputfieldRepeaterMatrix: 0.0.4
InputfieldTable: 0.1.7
InputfieldTextareas: 0.0.7
MarkupJsonLDSchema: 0.0.2
MarkupSimpleNavigation: 1.3.4
MarkupSrcSet: 0.1.2
PadCart: 0.0.2
PadCheckout: 0.0.1
PadDownloads: 0.0.1
PadLoper: 1.2.0
PadOnePageCheckout: 0.0.1
PadProcess: 0.0.2
PadProcessDownloads: 0.0.1
PadProcessShipping: 0.0.1
PadRender: 0.0.1
PageCleanEmptyDirs: 0.0.3
PageProtector: 1.0.6
PageSnapshot: 1.1.20
PageimageRemoveVariations: 0.0.4
PaymentInvoice: 0.0.1
PaymentModule: 0.0.1
ProCache: 3.1.6
ProcessAdminActions: 0.6.1
ProcessAdminCustomPages: 1.1.1
ProcessCroppableImage3: 1.1.10
ProcessDiagnostics: 0.2.2
ProcessHannaCode: 0.2.0
ProcessJumplinks: 1.5.48
ProcessProCache: 3.1.6
ProcessVersionControl: 1.2.4
ProcessWireUpgrade: 0.0.7
ProcessWireUpgradeCheck: 0.0.7
ShippingFixed: 0.0.1
TextformatterHannaCode: 0.2.0
TextformatterHeadline: 1.0.0
TracyDebugger: 4.6.20
VersionControl: 1.2.9

[Toutouwai]

This issue affects both PageListSelect and PageListSelectMultiple when there is more that one inputfield of those types on a page.

A screen capture that is a bit easier to view than the video linked to above:

Related forum thread: https://processwire.com/talk/topic/17547-weird-bug-with-page-ref-fields/

Suggestion for a possible fix

The issue occurs because some of the jQuery selectors are too broad, matching elements right across the DOM instead of only within the container of that inputfield.

I made the following changes to ProcessPageList.js that seem to resolve the issue, but I haven't gone through in detail to see if there are other selectors that are too broad.

Added after line 152:

var $outer = $container.is(":input") ? $container.parents('.InputfieldPageListSelectMultiple, .InputfieldPageListSelect') : $container;

Changed line 226:

$outer.on('keydown', '.PageListItem', function(e) {

Changed line 241:

$outer.on('mouseover', '.PageListItem', function(e) {

Changed line 262:

var $hideItems = $outer.find(".PageListItemHover");

[ryancramerdesign]

Thanks for the report @dreerr and thanks for the fix @Toutouwai, I've pushed this to the dev branch.

[netcarver]

@dreerr Hi there. Could you close this issue if Ryan has fixed it to your satisfaction. Many thanks!