added scrollbar window to autocomplete dropdown

pd/nw/css/c64.css

@@ -782,6 +782,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/css/default.css

@@ -950,6 +950,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/css/extended.css

@@ -764,6 +764,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/css/footgun.css

@@ -906,6 +906,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/css/inverted.css

@@ -816,6 +816,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/css/solarized.css

@@ -786,6 +786,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/css/solarized_inverted.css

@@ -787,6 +787,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/css/strongbad.css

@@ -778,6 +778,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/css/subdued.css

@@ -771,6 +771,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/css/vanilla.css

@@ -764,6 +764,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/css/vanilla_inverted.css

@@ -776,6 +776,9 @@ input[type="color"] {
 
 /* GB: Autocomplete Dropdown style */
 #autocomplete_dropdown {
+    min-height: auto;
+    max-height: 200px;
+    overflow-y: scroll;
     background-color: #ebebec;
     border: 1px solid;
     padding: 1px;

pd/nw/pd_canvas.js

@@ -180,6 +180,23 @@ var canvas_events = (function() {
             else
                 return is_canvas_obj(evt.target);
         },
+        target_is_ac_dropdown = function(evt) {
+            let ac = ac_dropdown();
+            if (!ac) {
+            return false;
+            }
+            let rect = ac.getBoundingClientRect();
+            let left = rect.left;
+            let right = rect.right;
+            let top = rect.top;
+            let bottom = rect.bottom;
+
+            if (evt.clientX < left || evt.clientX > right ||
+            evt.clientY < top || evt.clientY > bottom) {
+            return false;
+            }
+            return true;
+        },
         text_to_normalized_svg_path = function(text) {
             text = text.slice(4).trim()  // draw
                        .slice(4).trim()  // path
@@ -562,7 +579,11 @@ var canvas_events = (function() {
                     caret_end();
                     return false;
                 }
-                if (textbox() !== evt.target && !target_is_scrollbar(evt)) {
+            if(target_is_ac_dropdown(evt)) {
+                evt.stopPropagation();
+                return false;
+            }
+            if (textbox() !== evt.target && !target_is_scrollbar(evt)) {
                     utils.create_obj();
                     // send a mousedown and mouseup event to Pd to instantiate
                     // the object

pd/nw/pdgui.js

@@ -758,14 +758,45 @@ function update_autocomplete_selected(ac_dropdown, sel, new_sel) {
 function update_autocomplete_dd_arrowdown(ac_dropdown) {
     if (ac_dropdown !== null) {
         let sel = ac_dropdown.getAttribute("selected_item");
-        update_autocomplete_selected(ac_dropdown, sel, parseInt(sel) + 1);
+        let new_sel = parseInt(sel) + 1;
+
+        if (new_sel < ac_dropdown.children.length) {
+            update_autocomplete_selected(ac_dropdown, sel, new_sel);
+            let selected_element = ac_dropdown.children.item(new_sel);
+            let dropdown_height = ac_dropdown.offsetHeight;
+            let scroll_bottom = ac_dropdown.scrollTop + dropdown_height;
+            let element_bottom = selected_element.offsetTop + selected_element.offsetHeight;
+
+            if (element_bottom > scroll_bottom) {
+                ac_dropdown.scrollTop = (element_bottom - dropdown_height) + 4;
+            }
+        } else {
+            // Reached the end of the dropdown, cycle back to the beginning
+            update_autocomplete_selected(ac_dropdown, sel, 0);
+            ac_dropdown.scrollTop = 0;
+        }
     }
 }
 
 function update_autocomplete_dd_arrowup(ac_dropdown) {
     if (ac_dropdown !== null) {
         let sel = ac_dropdown.getAttribute("selected_item");
-        update_autocomplete_selected(ac_dropdown, sel, parseInt(sel) - 1);
+        let new_sel = parseInt(sel) - 1;
+
+        if (new_sel >= 0) {
+            update_autocomplete_selected(ac_dropdown, sel, new_sel);
+            let selected_element = ac_dropdown.children.item(new_sel);
+
+            if (selected_element.offsetTop < ac_dropdown.scrollTop) {
+                ac_dropdown.scrollTop = selected_element.offsetTop;
+            }
+        } else {
+        // Reached the beginning of the dropdown, cycle back to the end
+            let last_index = ac_dropdown.children.length - 1;
+            update_autocomplete_selected(ac_dropdown, sel, last_index);
+            let last_element = ac_dropdown.children.item(last_index);
+            ac_dropdown.scrollTop = last_element.offsetTop+4;
+        }
     }
 }
 
@@ -905,9 +936,6 @@ function repopulate_autocomplete_dd(doc, ac_dropdown, obj_class, text) {
 
     // record the complete results, we need them for tab completion
     let all_results = results;
-    // GB TODO: ideally we should be able to show all the results in a limited window with a scroll bar
-    let n = 8; // Maximum number of suggestions
-    if (results.length > n) results = results.slice(0,n);
 
     ac_dropdown().innerHTML = ""; // clear all old results
     if (results.length > 0) {