Components: Set type=button for TabPanel button elements. #11944
Conversation
The default button type is "submit" which submits the enclosing form. Setting the type property to "button" prevents this behavior.
|
Had you considered changing this to use the |
|
I hadn’t. That would make sense though. I’ll see what that looks like. |
|
Switching out for the |
|
There's a stylistic difference:
I'm not really sure what this component is meant to look like. It seems a bit useless in its current form. |
|
Ah. I guess because I already had provided the styles for my usage of it. Yeah, style wise the existing component is incredibly barebones. |
|
@jasmussen would mind giving it a sping to validate it doesn't introduce any regressions for tabs? |
|
@gziolo Thanks for the ping. I took this for a spin and added this to the separator to test:
It doesn't seem like we're using this component anywhere in Gutenberg itself. It really seems like it should come with some basic styles, and I'm essentially echoing @aduth here. This is because the But maybe that shouldn't hold up this PR if it fixes an issue? Not sure, and not sure how I can review this from a design perspective as there doesn't seem to be a design. To put it more simply, if the above was the design we intended for the TabPanel component, it would not be shippable. But this could be a separate task, to improve that, as mentioned. |
|
I merged this PR as is given that it doesn't have any impact on Gutenberg itself as I confirmed that this component is never used in the codebase. The change itself fixes the issue it references but let's work on the styles related improvements in a separate issue. I opened #13587 to track it. Let's discuss further steps there as it needs some design involvement. |
…rnmobile/372-use-RichText-on-Title-block * 'master' of https://github.com/WordPress/gutenberg: (36 commits) Fixes plural messages POT generation. (#13577) Typo fix (#13595) REST API: Remove oEmbed proxy HTML filtering (#13575) Removed unnecessary className attribute. Fixes #11664 (#11831) Add changelog for RSS block (#13588) Components: Set type=button for TabPanel button elements. (#11944) Update util.js (#13582) Docs: Add accessbility specific page (#13169) Rnmobile/media methods refactor (#13554) chore(release): publish chore(release): publish Plugin: Deprecate gutenberg_get_script_polyfill (#13536) Block API: Parse entity only when valid character reference (#13512) RichText: List: fix indentation (#13563) Plugin: Deprecate window._wpLoadGutenbergEditor (#13547) Plugin: Avoid setting generic "Edit Post" title on load (#13552) Plugin: Populate demo content by default content filters (#13553) RichText: List: Fix getParentIndex (#13562) RichText: List: Fix outdent with children (#13559) Scripts: Remove npm run build from test-e2e default run (#13420) ...
* Components: Set type=button for TabPanel button elements. The default button type is "submit" which submits the enclosing form. Setting the type property to "button" prevents this behavior. * Use a Button component for Tab buttons * Remove empty line
* Components: Set type=button for TabPanel button elements. The default button type is "submit" which submits the enclosing form. Setting the type property to "button" prevents this behavior. * Use a Button component for Tab buttons * Remove empty line
Fixes #11767.
Description
The default button type is "submit" which submits the enclosing form.
Setting the type property to "button" prevents this behavior.
I don't think it ever makes sense that you'd want a button in a tab panel to submit the form,
so I just made the
type="button"behavior for everything. Otherwise, a prop could be added to adjust the button type.How has this been tested?
I tried to write a unit test for this, but apparently an
onSubmithandler on a form will never be called from a button being clicked because it's not actually simulating the DOM?Types of changes
Bug fix.
Checklist: