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

SAccordionItem content doesn't expand #433

Open
0x009922 opened this issue Jun 30, 2022 · 1 comment
Open

SAccordionItem content doesn't expand #433

0x009922 opened this issue Jun 30, 2022 · 1 comment
Labels
bug Something isn't working has-workaround Issue is still actual but has a workaround next Related to next lib iteration, i.e. based on Vue 3

Comments

@0x009922
Copy link
Contributor

Repro

Use the bundled library:

<script setup lang="ts">
import { SAccordionItem, SCollapseTransition } from '@soramitsu-ui/ui'

const args = ref({
  title: 'Accordion item',
  subtitle: 'Accordion item description',
})

const model = ref(false)
</script>

<template>
  <SAccordionItem v-bind="args" v-model="model">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur.
  </SAccordionItem>


  <SCollapseTransition>
    <div v-show="model">
      Poom
    </div>
  </SCollapseTransition>
</template>

Expected

Expected to see the accordion content when it expands

Actual

Screen.Recording.2022-06-30.at.12.52.02.mov

Research results

Everything works fine when SCollapseTransition is removed from the component. But, as you can see in "Actual" section, SCollapseTransition itself works fine.

@0x009922 0x009922 added bug Something isn't working next Related to next lib iteration, i.e. based on Vue 3 labels Jun 30, 2022
@0x009922
Copy link
Contributor Author

More research

If use v-show="modelValue" in SAccordionItem.vue, it works!

Current build:

          default: withCtx(() => [
            withDirectives(createElementVNode("div", {
              id: unref(contentId),
              class: "s-accordion-item__body-wrapper"
            }, [
              createElementVNode("div", _hoisted_6$3, [
                renderSlot(_ctx.$slots, "default")
              ])
            ], 8, _hoisted_5$3), [
              [vShow, unref(model)]
            ])
          ]),

with modelValue binding it becomes:

[vShow, __props.modelValue]

It works. But when I change it to model.value, it doesn't. So the problem is in the reactivity details, I think.

0x009922 added a commit that referenced this issue Jun 30, 2022
0x009922 added a commit that referenced this issue Jun 30, 2022
@0x009922 0x009922 added the has-workaround Issue is still actual but has a workaround label Jul 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working has-workaround Issue is still actual but has a workaround next Related to next lib iteration, i.e. based on Vue 3
Projects
None yet
Development

No branches or pull requests

1 participant