Search code examples
typescriptsveltevscode-extensions

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

Context Language used : typescript UI toolkit svelte and bootstrap

Issue description I'm currently writing a vscode extension 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


  function updateOverview(op:string){
    // First we update overview table based on op
    let table:HTMLTableElement = <HTMLTableElement> document.getElementById("overview");
    let newRow=table.insertRow();
    newRow.classList.add("row");
    let insertCell=newRow.insertCell(0);
    let updateCell=newRow.insertCell(1);
    let deleteCell=newRow.insertCell(2);
    if(op=="update"){
      insertCell.innerHTML="&nbsp;";
      updateCell.innerHTML="update;";
      deleteCell.innerHTML="&nbsp;";
    }
    else if(op=="insert"){}
    else {} //Any other ops considered delete

  }

Here's the HTML table that is supposed to be updated

<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>
                </tbody>
            </table>

Here's the button snippet

<button  on:click={()=>{updateOverview("update")}}>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 view Here's what I get when clicking the button Result

What I tried

  • Using preventDefault event modifier
  • displaying a simple alert() on click

Update following brunnerh suggestion

added the following method to formdata holder class

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 now is

<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>

The button snippet now looks like

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

Still, the issue occurs....

Update 02-09-2024 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!

Solution

  • 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. Edit: Mastered vscode<->view data flow reading this blog post