histoire-dev / histoire-dev/histoire

Histoire is interfering with PrimeVue's Tree Component

Open
#764 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

to triage
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.