Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Strange selection column behavior #567

Open
VladislavPopovSR opened this issue Nov 14, 2023 · 0 comments
Open

Strange selection column behavior #567

VladislavPopovSR opened this issue Nov 14, 2023 · 0 comments
Labels
next Related to next lib iteration, i.e. based on Vue 3

Comments

@VladislavPopovSR
Copy link

VladislavPopovSR commented Nov 14, 2023

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.

@VladislavPopovSR VladislavPopovSR added the next Related to next lib iteration, i.e. based on Vue 3 label Nov 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
next Related to next lib iteration, i.e. based on Vue 3
Projects
None yet
Development

No branches or pull requests

1 participant