Fix compose form submission reloading web interface (#19762)

* Fix compose form submission reloading web interface

Fix regression introduced by #19742

* Fix various compose form buttons being handled like submit buttons

* Fix coding style issue

* Fix missing onClick prop check

app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap

@@ -4,6 +4,7 @@ exports[`<Button /> adds class "button-secondary" if props.secondary given 1`] =
 <button
   className="button button-secondary"
   onClick={[Function]}
+  type="button"
 />
 `;
 
@@ -11,6 +12,7 @@ exports[`<Button /> renders a button element 1`] = `
 <button
   className="button"
   onClick={[Function]}
+  type="button"
 />
 `;
 
@@ -19,6 +21,7 @@ exports[`<Button /> renders a disabled attribute if props.disabled given 1`] = `
   className="button"
   disabled={true}
   onClick={[Function]}
+  type="button"
 />
 `;
 
@@ -26,6 +29,7 @@ exports[`<Button /> renders class="button--block" if props.block given 1`] = `
 <button
   className="button button--block"
   onClick={[Function]}
+  type="button"
 />
 `;
 
@@ -33,6 +37,7 @@ exports[`<Button /> renders the children 1`] = `
 <button
   className="button"
   onClick={[Function]}
+  type="button"
 >
   <p>
     children
@@ -44,6 +49,7 @@ exports[`<Button /> renders the given text 1`] = `
 <button
   className="button"
   onClick={[Function]}
+  type="button"
 >
   foo
 </button>
@@ -53,6 +59,7 @@ exports[`<Button /> renders the props.text instead of children 1`] = `
 <button
   className="button"
   onClick={[Function]}
+  type="button"
 >
   foo
 </button>

app/javascript/mastodon/components/button.js

@@ -16,8 +16,12 @@ export default class Button extends React.PureComponent {
     children: PropTypes.node,
   };
 
+  static defaultProps = {
+    type: 'button',
+  };
+
   handleClick = (e) => {
-    if (!this.props.disabled) {
+    if (!this.props.disabled && this.props.onClick) {
       this.props.onClick(e);
     }
   }

app/javascript/mastodon/components/icon_button.js

@@ -141,6 +141,7 @@ export default class IconButton extends React.PureComponent {
 
     return (
       <button
+        type='button'
         aria-label={title}
         aria-pressed={pressed}
         aria-expanded={expanded}

app/javascript/mastodon/components/load_more.js

@@ -18,7 +18,7 @@ export default class LoadMore extends React.PureComponent {
     const { disabled, visible } = this.props;
 
     return (
-      <button className='load-more' disabled={disabled || !visible} style={{ visibility: visible ? 'visible' : 'hidden' }} onClick={this.props.onClick}>
+      <button type='button' className='load-more' disabled={disabled || !visible} style={{ visibility: visible ? 'visible' : 'hidden' }} onClick={this.props.onClick}>
         <FormattedMessage id='status.load_more' defaultMessage='Load more' />
       </button>
     );