fix: Rewrite upper right document search box

ietf/static/css/ietf.scss

@@ -1216,3 +1216,20 @@ iframe.status {
 .overflow-shadows--bottom-only {
     box-shadow: inset 0px -21px 18px -20px var(--bs-body-color);
 }
+
+#navbar-doc-search-wrapper {
+    position: relative;
+}
+
+#navbar-doc-search-results {
+    max-height: 400px;
+    overflow-y: auto;
+    min-width: auto;
+    left: 0;
+    right: 0;
+
+    .dropdown-item {
+        white-space: normal;
+        overflow-wrap: break-word;
+    }
+}

ietf/static/js/navbar-doc-search.js

@@ -0,0 +1,113 @@
+$(function () {
+    var $input = $('#navbar-doc-search');
+    var $results = $('#navbar-doc-search-results');
+    var ajaxUrl = $input.data('ajax-url');
+    var debounceTimer = null;
+    var highlightedIndex = -1;
+    var keyboardHighlight = false;
+    var currentItems = [];
+
+    function showDropdown() {
+        $results.addClass('show');
+    }
+
+    function hideDropdown() {
+        $results.removeClass('show');
+        highlightedIndex = -1;
+        keyboardHighlight = false;
+        updateHighlight();
+    }
+
+    function updateHighlight() {
+        $results.find('.dropdown-item').removeClass('active');
+        if (highlightedIndex >= 0 && highlightedIndex < currentItems.length) {
+            $results.find('.dropdown-item').eq(highlightedIndex).addClass('active');
+        }
+    }
+
+    function doSearch(query) {
+        if (query.length < 2) {
+            hideDropdown();
+            return;
+        }
+        $.ajax({
+            url: ajaxUrl,
+            dataType: 'json',
+            data: { q: query },
+            success: function (data) {
+                currentItems = data;
+                highlightedIndex = -1;
+                $results.empty();
+                if (data.length === 0) {
+                    $results.append('<li><span class="dropdown-item text-muted">No results found</span></li>');
+                } else {
+                    data.forEach(function (item) {
+                        var $li = $('<li>');
+                        var $a = $('<a class="dropdown-item" href="' + item.url + '">' + item.text + '</a>');
+                        $li.append($a);
+                        $results.append($li);
+                    });
+                }
+                showDropdown();
+            }
+        });
+    }
+
+    $input.on('input', function () {
+        clearTimeout(debounceTimer);
+        var query = $(this).val().trim();
+        debounceTimer = setTimeout(function () {
+            doSearch(query);
+        }, 250);
+    });
+
+    $input.on('keydown', function (e) {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (highlightedIndex < currentItems.length - 1) {
+                highlightedIndex++;
+                keyboardHighlight = true;
+                updateHighlight();
+            }
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (highlightedIndex > 0) {
+                highlightedIndex--;
+                keyboardHighlight = true;
+                updateHighlight();
+            }
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (keyboardHighlight && highlightedIndex >= 0 && highlightedIndex < currentItems.length) {
+                window.location.href = currentItems[highlightedIndex].url;
+            } else {
+                var query = $(this).val().trim();
+                if (query) {
+                    window.location.href = '/doc/search/?name=' + encodeURIComponent(query) + '&rfcs=on&activedrafts=on&olddrafts=on';
+                }
+            }
+        } else if (e.key === 'Escape') {
+            hideDropdown();
+            $input.blur();
+        }
+    });
+
+    // Hover highlights (visual only — Enter still submits the text)
+    $results.on('mouseenter', '.dropdown-item', function () {
+        highlightedIndex = $results.find('.dropdown-item').index(this);
+        keyboardHighlight = false;
+        updateHighlight();
+    });
+
+    $results.on('mouseleave', '.dropdown-item', function () {
+        highlightedIndex = -1;
+        updateHighlight();
+    });
+
+    // Click outside closes dropdown
+    $(document).on('click', function (e) {
+        if (!$(e.target).closest('#navbar-doc-search-wrapper').length) {
+            hideDropdown();
+        }
+    });
+});

ietf/templates/base.html

@@ -67,13 +67,17 @@
                         </a>
                     {% endif %}
 
-                    <label class="d-none d-md-block" aria-label="Document search">
-                    <input class="form-control select2-field search-select"
-                           id="navbar-doc-search"
-                           data-select2-ajax-url="{% url 'ietf.doc.views_search.ajax_select2_search_docs' model_name='document' doc_type='all' %}"
-                           type="text"
-                           data-placeholder="Document search">
-                   </label>
+                    <div class="d-none d-md-block dropdown" id="navbar-doc-search-wrapper">
+                        <input class="form-control"
+                               id="navbar-doc-search"
+                               type="text"
+                               placeholder="Document search"
+                               autocomplete="off"
+                               data-ajax-url="{% url 'ietf.doc.views_search.ajax_select2_search_docs' model_name='document' doc_type='all' %}"
+                               aria-label="Document search">
+                        <ul class="dropdown-menu" id="navbar-doc-search-results">
+                        </ul>
+                    </div>
                 </div>
                 <button class="navbar-toggler"
                         type="button"
@@ -164,11 +168,7 @@
         {% block js %}
         {% endblock %}
         <script src="{% static 'ietf/js/select2.js' %}"></script>
-        <script>
-            $('#navbar-doc-search').on('select2:select', function (e) {
-                window.location.href = e.params.data.url;
-            });
-        </script>
+        <script src="{% static 'ietf/js/navbar-doc-search.js' %}"></script>
       {% analytical_body_bottom %}
     </body>
 </html>

package.json

@@ -146,6 +146,7 @@
         "ietf/static/js/manage-review-requests.js",
         "ietf/static/js/meeting-interim-request.js",
         "ietf/static/js/moment.js",
+        "ietf/static/js/navbar-doc-search.js",
         "ietf/static/js/password_strength.js",
         "ietf/static/js/select2.js",
         "ietf/static/js/session_details.js",