Skip to content

Strange selection column behavior #567

@VladislavPopovSR

Description

@VladislavPopovSR

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!

2023-11-14.20.52.43.mov

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    nextRelated to next lib iteration, i.e. based on Vue 3

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions