Storybook: Autocomplete story should not submit the form #4551
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This comment was marked as resolved.
This comment was marked as resolved.
size-limit report 📦
|
broccolinisoup
approved these changes
May 7, 2024
TylerJDev
pushed a commit
that referenced
this pull request
May 7, 2024
github-merge-queue bot
pushed a commit
that referenced
this pull request
May 23, 2024
* Add new props to `FormControl.Label` * Add conditional * Add changeset * Update docs json * Add more examples * chore(deps-dev): bump ejs from 3.1.9 to 3.1.10 (#4549) Bumps [ejs](https://github.com/mde/ejs) from 3.1.9 to 3.1.10. - [Release notes](https://github.com/mde/ejs/releases) - [Commits](mde/ejs@v3.1.9...v3.1.10) --- updated-dependencies: - dependency-name: ejs dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * BranchName: Add style for span and add v8 tokens (#4556) * add style for branchName as span adn add v8 tokens * added changeset * Update thin-ligers-turn.md * test(vrt): update snapshots * use not a instead of matching for span --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: lukasoppermann <lukasoppermann@users.noreply.github.com> * refactor(Banner): update region to use a dedicated aria-label (#4539) * refactor(Banner): update region to use a dedicated aria-label * chore: add changeset, update config to exclude codesandbox * feat: add aria-label to Banner * Update packages/react/src/Banner/Banner.test.tsx Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> * Update packages/react/src/Banner/Banner.test.tsx Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> * test: update test label with aria-label --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> * chore(deps-dev): bump cross-env from 7.0.2 to 7.0.3 (#4561) Bumps [cross-env](https://github.com/kentcdodds/cross-env) from 7.0.2 to 7.0.3. - [Release notes](https://github.com/kentcdodds/cross-env/releases) - [Changelog](https://github.com/kentcdodds/cross-env/blob/master/CHANGELOG.md) - [Commits](kentcdodds/cross-env@v7.0.2...v7.0.3) --- updated-dependencies: - dependency-name: cross-env dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/plugin-transform-modules-commonjs (#4562) Bumps [@babel/plugin-transform-modules-commonjs](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-transform-modules-commonjs) from 7.23.3 to 7.24.1. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.1/packages/babel-plugin-transform-modules-commonjs) --- updated-dependencies: - dependency-name: "@babel/plugin-transform-modules-commonjs" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump jest-fail-on-console from 3.1.1 to 3.2.0 (#4563) Bumps [jest-fail-on-console](https://github.com/ValentinH/jest-fail-on-console) from 3.1.1 to 3.2.0. - [Release notes](https://github.com/ValentinH/jest-fail-on-console/releases) - [Commits](ValentinH/jest-fail-on-console@v3.1.1...v3.2.0) --- updated-dependencies: - dependency-name: jest-fail-on-console dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(FeatureFlags): broaden feature flag type to accept undefined (#4554) * feat(FeatureFlags): loosen feature flag type to accept undefined * chore: add changeset * Update .changeset/grumpy-coats-worry.md --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * prevent form submit (#4551) * deprecate title prop on ActionList.Group component on docs (#4544) * chore: add hydro analytics to storybook (#4558) * chore: add hydro analytics to storybook * chore: use previewHead over managerHead * Update build-docs --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Revert "Revert "Add support for nested submenus to `ActionMenu`"" (#4486) * Revert "Revert "Add support for nested submenus to `ActionMenu` (#4386)" (#4472)" This reverts commit 82072eb. * just want a change to trigger rebuild --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: Pavithra Kodmad <pksjce@github.com> * chore(deps): update typescript to 5.4.5 (#4568) Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Use dynamic height and width for dialogs (#4567) * Use dynamic height and width for dialogs * Update tall-forks-bathe.md --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> * Make asterisk default, update story scenarios * Update packages/react/src/FormControl/FormControl.docs.json Co-authored-by: Owen Niblock <owenniblock@github.com> * Update packages/react/src/internal/components/InputLabel.tsx Co-authored-by: Owen Niblock <owenniblock@github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Lukas Oppermann <lukasoppermann@github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: lukasoppermann <lukasoppermann@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> Co-authored-by: Armağan <broccolinisoup@github.com> Co-authored-by: Ian Sanders <iansan5653@github.com> Co-authored-by: Pavithra Kodmad <pksjce@github.com> Co-authored-by: Dusty Greif <dgreif@users.noreply.github.com> Co-authored-by: Owen Niblock <owenniblock@github.com>
khiga8
added a commit
that referenced
this pull request
May 31, 2024
* Add new props to `FormControl.Label` * Add conditional * Add changeset * Update docs json * Add more examples * chore(deps-dev): bump ejs from 3.1.9 to 3.1.10 (#4549) Bumps [ejs](https://github.com/mde/ejs) from 3.1.9 to 3.1.10. - [Release notes](https://github.com/mde/ejs/releases) - [Commits](mde/ejs@v3.1.9...v3.1.10) --- updated-dependencies: - dependency-name: ejs dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * BranchName: Add style for span and add v8 tokens (#4556) * add style for branchName as span adn add v8 tokens * added changeset * Update thin-ligers-turn.md * test(vrt): update snapshots * use not a instead of matching for span --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: lukasoppermann <lukasoppermann@users.noreply.github.com> * refactor(Banner): update region to use a dedicated aria-label (#4539) * refactor(Banner): update region to use a dedicated aria-label * chore: add changeset, update config to exclude codesandbox * feat: add aria-label to Banner * Update packages/react/src/Banner/Banner.test.tsx Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> * Update packages/react/src/Banner/Banner.test.tsx Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> * test: update test label with aria-label --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> * chore(deps-dev): bump cross-env from 7.0.2 to 7.0.3 (#4561) Bumps [cross-env](https://github.com/kentcdodds/cross-env) from 7.0.2 to 7.0.3. - [Release notes](https://github.com/kentcdodds/cross-env/releases) - [Changelog](https://github.com/kentcdodds/cross-env/blob/master/CHANGELOG.md) - [Commits](kentcdodds/cross-env@v7.0.2...v7.0.3) --- updated-dependencies: - dependency-name: cross-env dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/plugin-transform-modules-commonjs (#4562) Bumps [@babel/plugin-transform-modules-commonjs](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-transform-modules-commonjs) from 7.23.3 to 7.24.1. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.1/packages/babel-plugin-transform-modules-commonjs) --- updated-dependencies: - dependency-name: "@babel/plugin-transform-modules-commonjs" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump jest-fail-on-console from 3.1.1 to 3.2.0 (#4563) Bumps [jest-fail-on-console](https://github.com/ValentinH/jest-fail-on-console) from 3.1.1 to 3.2.0. - [Release notes](https://github.com/ValentinH/jest-fail-on-console/releases) - [Commits](ValentinH/jest-fail-on-console@v3.1.1...v3.2.0) --- updated-dependencies: - dependency-name: jest-fail-on-console dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(FeatureFlags): broaden feature flag type to accept undefined (#4554) * feat(FeatureFlags): loosen feature flag type to accept undefined * chore: add changeset * Update .changeset/grumpy-coats-worry.md --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * prevent form submit (#4551) * deprecate title prop on ActionList.Group component on docs (#4544) * chore: add hydro analytics to storybook (#4558) * chore: add hydro analytics to storybook * chore: use previewHead over managerHead * Update build-docs --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Revert "Revert "Add support for nested submenus to `ActionMenu`"" (#4486) * Revert "Revert "Add support for nested submenus to `ActionMenu` (#4386)" (#4472)" This reverts commit 82072eb. * just want a change to trigger rebuild --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: Pavithra Kodmad <pksjce@github.com> * chore(deps): update typescript to 5.4.5 (#4568) Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Use dynamic height and width for dialogs (#4567) * Use dynamic height and width for dialogs * Update tall-forks-bathe.md --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> * Make asterisk default, update story scenarios * Update packages/react/src/FormControl/FormControl.docs.json Co-authored-by: Owen Niblock <owenniblock@github.com> * Update packages/react/src/internal/components/InputLabel.tsx Co-authored-by: Owen Niblock <owenniblock@github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Lukas Oppermann <lukasoppermann@github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: lukasoppermann <lukasoppermann@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> Co-authored-by: Armağan <broccolinisoup@github.com> Co-authored-by: Ian Sanders <iansan5653@github.com> Co-authored-by: Pavithra Kodmad <pksjce@github.com> Co-authored-by: Dusty Greif <dgreif@users.noreply.github.com> Co-authored-by: Owen Niblock <owenniblock@github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Thanks for @JoyceZhu for reporting this bug!
Reproduction:
Open this url in firefox: https://primer.style/react/storybook/?path=/story/components-autocomplete--default, it redirects to an empty page.
Turns out this happens because
Autocomplete.playruns on load and submits the form in the story by simulating theEnterkey on the input. Chrome and Safari block this form submit because it happens without the user's action/permission. But, Firefox allows it.Submitting the form without an action reloads the page without the query params required to inform storybook which story to load
Changed
Added a prevent default on form submit 😇
Rollout strategy
Testing & Reviewing
Merge checklist