Select another version dropdown bug

URL: https://nodejs.org/api/https.html
Browser version: Chrome 78
Operating system: Windows 10

The View another version dropdown is a bit broken. When you mouse over it and go down, it closes before you can get your mouse into the version selection box.
Seems to happen 9/10 times for me.

@Trott

@Trott please move this to core

@XhmikosR

This looks to me as a website related issue, not sure why this has been moved to core. @XhmikosR can you elaborate on how this is related to node, and maybe label the issue?

FWIW I am unable to reproduce the issue on iPadOS 13, the dropdown behaves as expected there.

This looks to me as a website related issue, not sure why this has been moved to core.

The API docs are built as part of the releases. All the tooling to do that is in the core repository. The View another version dropdown is generated with this code:

node/tools/doc/html.js

Lines 394 to 422 in f4f856b

    
           async function altDocs(filename, docCreated) { 
        
             const [, docCreatedMajor, docCreatedMinor] = docCreated.map(Number); 
        
             const host = 'https://nodejs.org'; 
        
             const versions = await getVersions.versions(); 
        
             const getHref = (versionNum) => 
        
               `${host}/docs/latest-v${versionNum}/api/${filename}.html`; 
        
             const wrapInListItem = (version) => 
        
               `<li><a href="${getHref(version.num)}">${version.num}` + 
        
               `${version.lts ? ' <b>LTS</b>' : ''}</a></li>`; 
        
             function isDocInVersion(version) { 
        
               const [versionMajor, versionMinor] = version.num.split('.').map(Number); 
        
               if (docCreatedMajor > versionMajor) return false; 
        
               if (docCreatedMajor < versionMajor) return true; 
        
               if (Number.isNaN(versionMinor)) return true; 
        
               return docCreatedMinor <= versionMinor; 
        
             } 
        
             const list = versions.filter(isDocInVersion).map(wrapInListItem).join('\n'); 
        
             return list ? ` 
        
               <li class="version-picker"> 
        
                 <a href="#">View another version <span>&#x25bc;</span></a> 
        
                 <ol class="version-picker">${list}</ol> 
        
               </li> 
        
             ` : ''; 
        
           }

Speculatively it could be an issue with the style sheet:

node/doc/api_assets/style.css

Lines 112 to 158 in ce49f90

    
           li.version-picker { 
        
             position: relative; 
        
           } 
        
           li.version-picker:hover > a { 
        
             border-radius: 2px 2px 0 0; 
        
           } 
        
           li.version-picker:hover > ol { 
        
             display: block; 
        
             z-index: 1; 
        
           } 
        
           li.version-picker a span { 
        
             font-size: .7rem; 
        
           } 
        
           ol.version-picker { 
        
             background-color: #fff; 
        
             border: 1px solid #43853d; 
        
             border-radius: 0 0 2px 2px; 
        
             display: none; 
        
             list-style: none; 
        
             position: absolute; 
        
             right: 0; 
        
             top: 1.25rem; 
        
             width: 100%; 
        
           } 
        
           #gtoc ol.version-picker li { 
        
             display: block; 
        
             border-right: 0; 
        
             margin-right: 0; 
        
           } 
        
           ol.version-picker li a { 
        
             border-radius: 0; 
        
             display: block; 
        
             margin: 0; 
        
             padding: .1rem; 
        
             padding-left: 1rem; 
        
           } 
        
           ol.version-picker li:last-child a { 
        
             border-bottom-right-radius: 1px; 
        
             border-bottom-left-radius: 1px; 
        
           }

I can't reproduce the issue.

Still reproducible to me, Chrome 79

Just move your mouse down slowly

I can replicate this issue in Firefox v72.0.2 64-bit and Chrome Chrome 79.0.3945.130 64-bit on Windows 10. When you hover from the right side to open the drop down menu, the drop down will close if your cursor remains an arrow icon. Hovering in from the left appears to work fine. If you hover far enough to highlight the link it works fine, but ff you hover back far enough to the right to lose the hand icon, and try to select the drop down, it will close.

It looks like a bit of right padding may have something to do with this.

Here are a couple of images. Hope this helps.

Unable to duplicate behavior in Chrome, Firefox, or Edge on Windows 10. Issue was possibly fixed previous but the issue was never closed. Closing, but can reopen if it turns out to still be an issue

Still going on on the live website in Chrome 83.

hmm.. strange. I'm on Chrome 83 on Windows 10 and completely unable to replicate. Do you happen to have any extensions that could be causing it?

Related PRs:

Assuming this was fixed by these PRs

Navigation Menu

Repository navigation

Select another version dropdown bug #30969

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	async function altDocs(filename, docCreated) {
	const [, docCreatedMajor, docCreatedMinor] = docCreated.map(Number);
	const host = 'https://nodejs.org';
	const versions = await getVersions.versions();

	const getHref = (versionNum) =>
	`${host}/docs/latest-v${versionNum}/api/${filename}.html`;

	const wrapInListItem = (version) =>
	`<li><a href="${getHref(version.num)}">${version.num}` +
	`${version.lts ? ' <b>LTS</b>' : ''}</a></li>`;

	function isDocInVersion(version) {
	const [versionMajor, versionMinor] = version.num.split('.').map(Number);
	if (docCreatedMajor > versionMajor) return false;
	if (docCreatedMajor < versionMajor) return true;
	if (Number.isNaN(versionMinor)) return true;
	return docCreatedMinor <= versionMinor;
	}

	const list = versions.filter(isDocInVersion).map(wrapInListItem).join('\n');

	return list ? `
	<li class="version-picker">
	<a href="#">View another version <span>▼</span></a>
	<ol class="version-picker">${list}</ol>
	</li>
	` : '';
	}

	li.version-picker {
	position: relative;
	}

	li.version-picker:hover > a {
	border-radius: 2px 2px 0 0;
	}

	li.version-picker:hover > ol {
	display: block;
	z-index: 1;
	}

	li.version-picker a span {
	font-size: .7rem;
	}

	ol.version-picker {
	background-color: #fff;
	border: 1px solid #43853d;
	border-radius: 0 0 2px 2px;
	display: none;
	list-style: none;
	position: absolute;
	right: 0;
	top: 1.25rem;
	width: 100%;
	}

	#gtoc ol.version-picker li {
	display: block;
	border-right: 0;
	margin-right: 0;
	}

	ol.version-picker li a {
	border-radius: 0;
	display: block;
	margin: 0;
	padding: .1rem;
	padding-left: 1rem;
	}

	ol.version-picker li:last-child a {
	border-bottom-right-radius: 1px;
	border-bottom-left-radius: 1px;
	}

Select another version dropdown bug #30969

Description

Activity

XhmikosR commented on Dec 14, 2019

aduh95 commented on Dec 16, 2019

richardlau commented on Dec 17, 2019

lpinca commented on Jan 5, 2020

Christilut commented on Jan 5, 2020

AshleyLilith commented on Jan 25, 2020

jasnell commented on Jul 6, 2020

Christilut commented on Jul 6, 2020

jasnell commented on Jul 6, 2020

aduh95 commented on Aug 14, 2020

targos commented on Aug 9, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions