histoire
histoire copied to clipboard
Can't render multiple controls without wrapping them in a container
trafficstars
Describe the bug
The following code should render two controls (as shown in the documentation), however no controls are rendered.
<template #controls>
<!-- no controls are rendered -->
<HstSelect title="Color" v-model="state.color" :options="colors" />
<HstText title="Label" v-model="state.label" />
</template>
Wrapping both controls inside a container solves the issue:
<template #controls>
<!-- two controls are rendered -->
<div>
<HstSelect title="Color" v-model="state.color" :options="colors" />
<HstText title="Label" v-model="state.label" />
</div>
</template>
I provided a Nuxt Stackblitz reproduction, with two <Variant>s of <BaseButton>, reproducing the bug.
Reproduction
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.18.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.14.0 - /usr/local/bin/pnpm
npmPackages:
@histoire/plugin-nuxt: ^0.17.10 => 0.17.10
@histoire/plugin-vue: ^0.17.11 => 0.17.11
histoire: ^0.17.9 => 0.17.9
Used Package Manager
npm
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- [X] The provided reproduction is a minimal reproducible example of the bug.