histoire-dev / histoire-dev/histoire
Histoire is interfering with PrimeVue's Tree Component
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
It is possible for PrimeVue's Tree component to show multiple items selected while using it with Histoire.
PrimeVue's Tree component works without issue when used within a normal app.
I did report this to PrimeVue as well, but it seems unlikely it is their issue. The ticket there is: https://github.com/primefaces/primevue/issues/6609
### Reproduction
I have a simple sample project which can be used to demonstrate the problem. Note, while trying to reproduce the bug in Histoire, it may be necessary to reload the page a couple of times.
https://github.com/eric-g-97477-vue/PrimeVueTree
It is unfortunately unclear how I can use StackBlitz, etc. to reproduce this bug, so hopefully my sample project will be good enough.
Screen Recording of the bug inside of histoire...
https://github.com/user-attachments/assets/cb05ec36-1157-4415-924c-0200f1466b7b
Screen Recording of it working inside a regular app...
https://github.com/user-attachments/assets/d99adb60-f5ee-48ee-8e89-bd51e498e623
### System Info
```shell
npx envinfo --system --npmPackages '{histoire,@histoire/*,vite,@vitejs/*}' --binaries --browsers 20:14:40
System:
OS: macOS 14.7
CPU: (16) arm64 Apple M3 Max
Memory: 146.22 MB / 64.00 GB
Shell: 3.7.1 - /opt/homebrew/bin/fish
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v16.16.0/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Browsers:
Chrome: 129.0.6668.101
Safari: 18.0.1
npmPackages:
@histoire/plugin-vue: ^0.17.17 => 0.17.17
@vitejs/plugin-vue: ^5.0.5 => 5.1.0
histoire: ^0.17.17 => 0.17.17
vite: ^5.2.13 => 5.3.4
```
### Used Package Manager
npm
### Validations
- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) 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](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked PrimeVueTree reproduction and compare its behavior in Histoire with the same component in a regular app. Trace the Histoire/Vite integration involved in rendering the Tree; done means the Tree no longer displays multiple selected items in Histoire while preserving normal-app behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 32/100