I have a custom widget in a list view to show a selection field. I am using ListRenderer.include from javascript side to add my widget. Now from Listcontroller.include, my  custom java script function is doing some logic in same list view, I am calling this.reload(); to reload the view at the end of the function, my problem is I don't want to change selection of above-mentioned field but when this.reload(); is triggering, it is resetting the value of the above selection field.

Here is my field.

select class="form-control my_field">
    t-foreach="widget.my_widget" t-as="dict_a">
        t-att-value="dict_a.id"
                t-att-selected="dict_a.id == widget.localstorage_field_name and 'selected' or None">
            t-esc="dict_a.value"/>
        
    

In JavaScript I am storing this field's selection ID in local storage when user changes this field. But when this.reload(); happens, it is resetting the value of this field in widget view but not in local storage. Now view has something else, but value being used in functions is something else. How can I avoid it?

Here is my function responsible to handle field value in ListRenderer.include

_on_change_my_field: async function(ev) {
    ev.stopPropagation();
    var selection = $(ev.currentTarget).val();    
localStorage.setItem('localstorage_field_name', selection);
},

here is a function from ListController.include having this.reload();

_myfunction: async function(myinput){
 var data = localStorage.getItem('localstorage_field_name') || '';
 console.log(data);
 // console: 8
 //do the logic
 this.reload();
 var test_data = localStorage.getItem('localstorage_find_name') || "";
 console.log(data, test_data)
 // console: 8, 8
}