Can't assign interfaces to connection that are on page (>1)

[ekrichbaum]

NetBox version

v3.2.0-beta2

Python version

3.9

Steps to Reproduce

2 devices that both have interface to connect on page 2.

1. go to either, select interface and add termination to interface.
2. Attempt to select opposite side interface from dropdown (or use filter).
   

Expected Behavior

if dropdown is limited per page size, filter should override and search entire device.

Observed Behavior

Unable from either side to attach interface to interface.

• Side note, occurs from circuit termination side as well, although attaching circuit from the interface side does work.

[jeremystretch]

Thank you for opening a bug report. Unfortunately, the information you have provided is not sufficient for someone else to attempt to reproduce the reported behavior. Remember, each bug report must include detailed steps that someone else can follow on a clean, empty NetBox installation to reproduce the exact problem you're experiencing. These instructions should include the creation of any involved objects, any configuration changes, and complete accounting of the actions being taken. Also be sure that your report does not reference data on the public NetBox demo, as that is subject to change at any time by an outside party and cannot be relied upon for bug reports.

[ekrichbaum]

It is 100% reproduceable. Every time the interfaces of both devices are on a page greater than 1, it is not selectable in the connection. It does not show in the list or in the filter search.

a side interface on page 2:

z side interface on page 2:

From either side the other is not in the drop connect of the connection, nor selectable from the filter.

The drop downlist follows the paging (i.e. only shows page 1).

[DanSheps]

@ekrichbaum It isn't that this isn't reproduceable.

You haven't provided us with steps to accurately reproduce it (assume we have a blank instance of Netbox, with no data other then we can login).

I do believe I know what is causing this and it may be fixed by #9061.

[ekrichbaum]

I'll take a look. In the slack, we did narrow it down to being browser specific. Worked in firefox, not in chrome or edge on the same machine. We had just started using edge each time it came up, but I'll recheck now that codebase has updated also.

[jeremystretch]

@ekrichbaum were you able to track this down any further?

[ekrichbaum]

unfortunately, no. I've just been loading firefox to get to those points even though it isn't my "normal" browser.

There should be a javascript event fired at the bottom of the list that kicks to the next page, correct? typing in a result seems to only check the current page as well, so I need to find where it tries and fails to perform that action.

[kkthxbye-code]

Just to rule it out, could you try in incognito and make sure you have no extensions enabled in incognito mode. Also make sure the page isn't zoomed (Ctrl+0).

[ekrichbaum]

valid and hadn't tried.
1.) open new incognito window
2.) login to netbox and choose a device with >1 pages of interfaces
3.) choose interfaces tab and go to page 2.
4.) choose connection to interface (changes to connection pane)
5.) select second device with >1 pages of interfaces

seems to be working as expected. To re-validate original issue, trying again from normal window. Original problem exists. No event fires to load additional pages scrolling through the interfaces.

Additional info... Refresh button does fire event visible in Inspect/Network but no console messages from scroll attempt and no network activity for an attempt to load. Definitely narrowed it down. Any tips now how to find it?

[ekrichbaum]

it's the zoom, not extensions. With ctrl-0 first, it works as expected, but on any other text size, it fails to fire the event.

[kkthxbye-code]

Nice. Issue is here:

netbox/netbox/project-static/src/select/api/apiSelect.ts

Lines 573 to 575 in 8315883

	const atBottom =
	this.slim.slim.list.scrollTop + this.slim.slim.list.offsetHeight ===
	this.slim.slim.list.scrollHeight;

Only seems to happen with 110% zoom. When at 110% zoom, the values will look like this:

console.log(e.scrollTop + e.offsetHeight)
console.log(e.scrollHeight)
1649.0908203125
1649

Math.floor on scrollTop 1 px buffer on scrollHeight should fix it. The issue is that scrollTop returns fractions with some zoom levels in chrome.