Adjust select width

Fix openVersionSelect function

Author: alisinabh

assets/css/sidebar.css

@@ -125,6 +125,16 @@
     top: 3px;
 }
 
+.sidebar-versionsLabel {
+  position: relative;
+  cursor: pointer;
+}
+
+.sidebar-versionsText {
+  padding: 0 0 0 12px;
+  color: var(--sidebarMuted);
+}
+
 .sidebar .sidebar-list-nav {
   display: flex;
   margin: 0;

assets/js/handlebars/templates/versions-dropdown.handlebars

@@ -2,7 +2,8 @@
   <label>
     <span class="sidebar-projectVersionsDropdownCaret" aria-hidden="true">&#x25bc;</span>
     <span class="sr-only">Project version</span>
-    <select class="sidebar-projectVersionsDropdown">
+    <span class="sidebar-versionsText"></span>
+    <select class="sidebar-projectVersionsDropdown" hidden>
       {{#each nodes}}
         <option translate="no" value="{{url}}"{{#if isCurrentVersion}} selected disabled{{/if}}>
           {{version}}

assets/js/sidebar/sidebar-version-select.js

@@ -4,6 +4,7 @@ import versionsDropdownTemplate from '../handlebars/templates/versions-dropdown.
 
 const VERSIONS_CONTAINER_SELECTOR = '.sidebar-projectVersion'
 const VERSIONS_DROPDOWN_SELECTOR = '.sidebar-projectVersionsDropdown'
+const VERSIONS_TEXT_SELECTOR = '.sidebar-versionsText'
 
 /**
  * Initializes selectable version list if `versionNodes` have been configured.
@@ -22,9 +23,22 @@ export function initialize () {
     const nodes = decorateVersionNodes(versionNodes, currentVersion)
 
     renderVersionsDropdown({ nodes, latestVersion })
+    initializeVersionSelect()
   }
 }
 
+function initializeVersionSelect () {
+  const select = qs(VERSIONS_DROPDOWN_SELECTOR)
+  const text = qs(VERSIONS_TEXT_SELECTOR)
+
+  text.textContent = select.options[select.selectedIndex].text
+
+  text.addEventListener('click', (event) => {
+    if (event.target === select) return
+    openVersionSelect()
+  })
+}
+
 function renderVersionsDropdown ({ nodes, latestVersion }) {
   const versionsContainer = qs(VERSIONS_CONTAINER_SELECTOR)
   const versionsDropdownHtml = versionsDropdownTemplate({ nodes, latestVersion })
@@ -84,6 +98,18 @@ function handleVersionSelected (event) {
  */
 export function openVersionSelect () {
   const select = qs(VERSIONS_DROPDOWN_SELECTOR)
+  const text = qs(VERSIONS_TEXT_SELECTOR)
+
+  select.hidden = false
+  text.hidden = true
+
+  const hideSelect = () => {
+    select.hidden = true
+    text.hidden = false
+    select.removeEventListener('blur', hideSelect)
+  }
+
+  select.addEventListener('blur', hideSelect)
 
   if (select) {
     select.focus()