Repository: netbox-community/netbox
Pull request: Fixes #8813 Retain search value after submitting
<!--
    Thank you for your interest in contributing to NetBox! Please note
    that our contribution policy requires that a feature request or bug
    report be opened for approval prior to filing a pull request. This
    helps avoid wasting time and effort on something that we might not
    be able to accept.

    Please indicate the relevant feature request or bug report below.
    IF YOUR PULL REQUEST DOES NOT REFERENCE AN ACCEPTED BUG REPORT OR
    FEATURE REQUEST, IT WILL BE MARKED AS INVALID AND CLOSED.
-->
### Fixes: #8813 Retain search value after submitting
<!--
    This PR will make sure that the value being searched for, is shown again in the top search bar.
-->


Problem statement:
Search bar contents not retained after submitting
### NetBox version

v3.1.8

### Python version

3.8

### Steps to Reproduce

1. Enter a search term into the main search bar and submit
2. See empty search bar

### Expected Behavior

1. Enter a search term into the main search bar and submit
2. Search term should still be present

### Observed Behavior

1. Enter a search term into the main search bar and submit
2. Search bar is empty

Hints from issue discussion:
I've been wanting to submit a FR for this, but always forgot about it :-)
Maybe a good one to combine with #7839 (set input focus on searchbar )

I have a PR for this ready.. @jeremystretch can you assign this to me ?

Commit message: Fixes #8813 Retain search value after submitting

Patch to review:
diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html
index da2d10c65da..0def1c90e73 100644
--- a/netbox/templates/base/layout.html
+++ b/netbox/templates/base/layout.html
@@ -33,7 +33,7 @@
                 </button>
               </div>
               <div class="d-flex my-1 flex-grow-1 justify-content-center w-100">
-                {% search_options %}
+                {% search_options request %}
               </div>
             </div>
 
@@ -45,7 +45,7 @@
 
               {# Search bar #}
               <div class="col-6 d-flex flex-grow-1 justify-content-center">
-                {% search_options %}
+                {% search_options request %}
               </div>
 
               {# Proflie/login button #}
diff --git a/netbox/utilities/templates/search/searchbar.html b/netbox/utilities/templates/search/searchbar.html
index d71fd8e69ec..0335160e76d 100644
--- a/netbox/utilities/templates/search/searchbar.html
+++ b/netbox/utilities/templates/search/searchbar.html
@@ -5,7 +5,11 @@
     aria-label="Search"
     placeholder="Search"
     class="form-control"
-    value="{{ request.GET.q }}"
+    value=""
+    {% if request.GET.q %}
+      autofocus
+      onfocus="this.value = '{{ request.GET.q|escapejs }}';" 
+    {% endif %}
   />
 
   <input name="obj_type" hidden type="text" class="search-obj-type" />
diff --git a/netbox/utilities/templatetags/search.py b/netbox/utilities/templatetags/search.py
index aad533e7ed3..5726ae5d53e 100644
--- a/netbox/utilities/templatetags/search.py
+++ b/netbox/utilities/templatetags/search.py
@@ -8,6 +8,9 @@
 
 
 @register.inclusion_tag("search/searchbar.html")
-def search_options() -> Dict:
+def search_options(request) -> Dict:
     """Provide search options to template."""
-    return {"options": search_form.options}
+    return {
+        'options': search_form.options,
+        'request': request,
+    }


Code review comments:
diff_hunk: @@ -5,7 +5,11 @@
     aria-label="Search"
     placeholder="Search"
     class="form-control"
-    value="{{ request.GET.q }}"
+    value=""
path: netbox/utilities/templates/search/searchbar.html
text: @user1:
Why not leave this as-is?

@author:
By setting the value with a javascript, the cursor moves to the end of the input field.. if I just set the value, the cursor is at the start of the input field...


@user1:
But it doesn't even render the value until the user clicks the field, which doesn't resolve #8813. Just leaving it as `value="{{ request.GET.q }}"` ensures the value is populated, and the cursor defaults to the end of the string on focus.

@author:
The autofocus part takes care of setting the focus. 
If I leave out the onfocus part. then the cursor is at the start of the value.
You need to merge that PR #8908 to make this work. The autofocus is currently overruled by the piece of javascript in the netbox.ts

@user1:
Ok. For now, can we change this to `value="{{ request.GET.q }}"` just to close out #8813? I suspect #8908 might need some additional tweaking but I'm waiting for Matt to weigh in. We can add the autofocus bit under that PR to ensure it's correlated with the appropriate FR.

@author:
I removed the autocomplete and onfocus from this PR.. Moving that to the #8908

@user1:
Thanks!