Autocomplete result popup window in reference field displays non-functional link "Showing 1 through 15 of ..."


When using a reference field with autocomplete, a result popup window below the field displays an invalid link with the text Showing 1 through 15 of ... at the top of the possible matches list.

When hovering over this text, the cursor changes to a pointer, indicating that it is a link, but clicking it results in no action.

Steps to Reproduce

  1. Log in to any demo OOB instance.

  2. Open an existing incident or create a new one.

  3. Make sure the form displays the Caller reference field with the auto-complete option correctly set.

    If the form is not in that state, personalize the form layout and the field dictionary as needed. For information, see Personalizing Forms and Auto-Complete for Reference Fields in the product documentation.

  4. Start typing in the caller_id field.

    Note the invalid misleading link on top of the listed resulting matches. This link should click into the list view for the search results.



After carefully considering the severity and frequency of the issue, and risk of attempting a fix, it has been decided to not address this issue in any current or future releases. We do not make this decision lightly, and we apologize for any inconvenience. If you have any questions regarding this problem, contact ServiceNow Customer Support.


COSMETIC Workaround

We can modify the link's appearance so that users will identify it as a title for the list.

The following global UI script will insert a style element which causes the link element to appear like a plain text element. On hover, the cursor doesn't change and the text is not underlined. It also hides the error element which appears after clicking the link. The style will apply to all reference variables on the traditional catalog item page.

  // Only run on catalog item pages
  if ( !~location.href.indexOf( 'com.glideapp.servicecatalog_cat_item_view' ))

  /* Create the link element and define the style content
   This script has two style properties. The first hides the 
   error message. The second prevents the "link" from 
   looking like a link */
  var link = document.createElement( 'link' ),
  styles = [
    'div.fieldmsg-container > div[class="fieldmsg notification notification-error"] { display:none !important; }',
    'tr.ac_header > td > a { user-select:none !important; cursor:default !important; text-decoration:none !important; }'
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.href = URL.createObjectURL( new Blob([ styles.join(' ') ], { type: 'text/css' }) );

  (document.head || document.documentElement).appendChild( link );

Related Problem: PRB645578