Skip to content

Conversation

@kylebuch8
Copy link
Contributor

When ShadyCSS is present and a pfe-accordion-header is inside a form tag, the button inside the pfe-accordion-header will cause the parent form tag to submit.

Fixes #473

adding type="button" to the button in the header


What has changed and why

Summarize files edited as part of this MR along with a brief description of what was changed/why.

  • If a browser is using ShadyCSS (I'm looking at you Edge and IE11), clicking on a pfe-accordion-header inside a form tag will cause the form to submit. All we did to fix this was add type="button" to the button in pfe-accordion-header to fix the issue.

Testing instructions

Be sure to include detailed instructions on how your update can be tested by another developer.

  1. Open the pfe-accordion demo file in your browser and click on the header in form test for ShadyCSS section. It should not fire an alert message in the browser.

Browser requirements

Your component should work in all of the following environments:

  • [ x] Latest 2 versions of Edge
  • [ x] Internet Explorer 11 (should be useable, not pixel perfect)
  • [ x] Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
  • [ x] Firefox 60.7.2 (or latest version for Red Hat Enterprise Linux distribution)
  • [ x] Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
  • [ x] Latest 2 versions of Safari
  • [ x] Galaxy S9 Firefox
  • [ x] iPhone X Safari
  • [ x] iPad Pro Safari
  • [ x] Pixel 3 Chrome

Your repository infrastructure updates should work for at least:

  • [x ] Node v8.x
  • [x ] NPM v7.x

Ready-for-merge Checklist

  • Expected files: all files in this pull request are related to one feature request or issue (no stragglers)?
  • [ x] Did automated tests pass?
  • [x ] Did browser testing pass?
  • Did you update or add any necessary documentation (README.md, WHY.md, etc.)?
  • Was this feature demo'd and the design review approved?
  • Did it get a LGTM after the last commit?
  • Did you update the CHANGELOG.md file with a summary of this update?

Be sure to share your updates with the patternfly-elements-contribute@redhat.com mailing list!

When ShadyCSS is present and a pfe-accordion-header is inside a form tag, the button inside the pfe-accordion-header will cause the parent form tag to submit.

Fixes #473
We can't test this in our test runner because we won't be able to simulate IE11 or Edge so I'm doing this in the demo file
@kylebuch8 kylebuch8 added the ready: code review Ready for code review! label Jul 31, 2019
@kylebuch8 kylebuch8 requested a review from starryeyez024 July 31, 2019 22:35
@starryeyez024
Copy link
Member

An issue that is not part of this branch is that IE11 is struggling with rendering the demo page plus the library that blocks rendering. If I remove unresolved from the body tag there is no issue.

Beyond that, this works great. Thanks!

Copy link
Member

@starryeyez024 starryeyez024 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Little grievances that madden.

@kylebuch8 kylebuch8 merged commit 00389c2 into master Aug 1, 2019
@kylebuch8 kylebuch8 deleted the issue-473 branch August 1, 2019 12:01
@kylebuch8 kylebuch8 removed the ready: code review Ready for code review! label Aug 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Buttons within pfe-accordion-header inadvertently submit forms where ShadyCSS is used

3 participants