soramitsu / soramitsu-js-ui-library

Javascript UI library used by SORAMITSU
Apache License 2.0
8 stars 3 forks source link

Strange selection column behavior #567

Open VladislavPopovSR opened 1 year ago

VladislavPopovSR commented 1 year ago

I'm using s-tabs-panel for switch between new requests and history tabs (depending on value of current tab i pass different props through component)

const NEW_REQUESTS_TAB = 'newRequests';
const HISTORY_TAB = 'history';
<KeyRecoveryNewRequestsList :page="currentTab === HISTORY_TAB?'history':'' "/>

Inside KeyRecoveryNewRequestsList (it's the first column) :

 <s-table-column. 
            v-if="!props.page"
          type="selection"
          :selectable="hasActions"
        />

Expected behavior : New requests page should have selection table and history page shouldn't.

To display every switch between tabs I added onUpdate hook :

const props=defineProps<{
  page:string
}>()
onUpdated(()=>console.log("props:"+props.page))

Real behavior : Every time i switch between tabs selection column adds as last.

I've attached the video below. Thanks!

https://github.com/soramitsu/soramitsu-js-ui-library/assets/149061523/13983e33-1f82-4688-935e-e958897f944f

UPD

As I understand every new selection column appears since we don't rerender full component, we just pass through our component different prop value so only selection column rerenders. The next code works properly :

<KeyRecoveryNewRequestsList v-if="currentTab === HISTORY_TAB" page='history'/>
<KeyRecoveryNewRequestsList v-else/>

I guess thats not design system problem, it's depending on design system components usage.