Why is Clicking a button intended to modify specific part of view in my vscode extension 'destroying' it?

[laurentmor]

Hello community!
Casting my line at the sea in hope of receiving some guidance

Context
Currently working on an extension aimed at generated a file based on a user input in a viewPanel form

Language used : typescript
UI toolkit: svelte and bootstrap

Issue description

With one of it's feature being that clicking a button update an HTML table element in the view based on which button is clicked.

Here's the typescrypt code that would be executed on each click

public addAffectectedTable(name:string,what:string,count:number):void {
    if(this._tables){
        if(this._tables.length===0){
            let table:AffectedTable;
            this._tables[0].name=name;
            this._tables[0].what=what;
            this._tables[0].howMany=count;
        }
        else{
            for (let index = 0; index < this._tables.length; index++) {
                const element = this._tables[index];
                if(element.name===name&&element.what===what){element.howMany+=count;};


            }
            let newRowIndex=this._tables.length+1;
            this._tables[newRowIndex].name=name;
            this._tables[newRowIndex].what=what;
            this._tables[newRowIndex].howMany=count;
        }

    }
}

My svelte template table segment is:

<table class="table table-dark" id="overview">
              <thead>
                <tr>
                  <th scope="col" colspan="3" align="center">Overview</th>
                  <th scope="col">&nbsp;</th>
                  <th scope="col">&nbsp;</th>

                </tr>
                <tr>
                  <th scope="col">Insert</th>
                  <th scope="col">Update</th>
                  <th scope="col">Delete</th>

                </tr>
              </thead>
              <tbody>
 {#if formElements._tables}
              {#each formElements._tables as table}
              <tr>{#if table.what==="insert"}
                    <td>{table.name} -{table.howMany} </td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                {/if}
                {#if table.what==="update"}
                <td>&nbsp;</td>
                <td>{table.name} -{table.howMany} </td>
                <td>&nbsp;</td>
            {/if}

            {#if table.what==="delete"}
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>{table.name} -{table.howMany} </td>
                {/if}
              </tr>
              {/each}
            {/if}
                </tbody>
            </table>
....

My button is defined this way:

<button  on:click={()=>{formElements.addAffectectedTable("test","update",3)}}>Update <i class="fa fa-refresh" aria-hidden="true"></i></button>

Here's the relevant part of my view, there are a lot more things in it

Here's what I get when clicking the button

What I tried

• Using preventDefault event modifier
• displaying a simple alert() on click
• The issue occurs even if I click on a button with no defined behavior such as:

<span style="display: inline-block;"><button>Insert <i class="fa fa-plus" aria-hidden="true"></i></button></span>

What I expected

The 'overview' table part of my extension view to be update on each click.

There must be some things I don't get about vscode extension lifecycle and view rendering.... Should I encapsulate my overview table as a nested viewPanel inside my extension main view ?

Any help and tips would be greatly appreciated :)

Thank you!

(I feel that I'm missing details to make my question understandable but I can't say what...so feel free to ask for precisions)

[isidorn]

Are you still seeing this issue? If yes, can you share some simple reproducible steps?

[laurentmor]

Apparently, not so sure why, puting my webview html elements inside a form tag makes it so that every buttons in it "submits" it clearing the panel.