From b237e6513c7f064f821f98d47bb11a648aa32508 Mon Sep 17 00:00:00 2001
From: David Sevilla Martin <6401250+dsevillamartin@users.noreply.github.com>
Date: Fri, 30 May 2025 12:34:58 -0400
Subject: [PATCH 1/2] fix: prevent <button>'s from becoming form submit when
 they shouldn't

Adds `type=button` to most `<button>` usage (except the AdminPage#submitButton). The first button of type submit (which is the default in HTML if undeclared) becomes what the enter keybind presses in a form. This makes the behavior with these components make more sense.
---
 extensions/emoji/js/src/forum/addComposerAutocomplete.js      | 1 +
 .../mentions/js/src/forum/components/MentionsDropdownItem.tsx | 2 +-
 extensions/mentions/js/src/forum/fragments/PostQuoteButton.js | 1 +
 .../statistics/js/src/admin/components/StatisticsWidget.tsx   | 1 +
 framework/core/js/src/admin/components/AdminPage.tsx          | 2 +-
 framework/core/js/src/admin/components/PermissionsPage.tsx    | 4 ++--
 framework/core/js/src/admin/components/UserListPage.tsx       | 1 +
 .../core/js/src/common/components/DetailedDropdownItem.tsx    | 2 +-
 framework/core/js/src/common/components/Dropdown.tsx          | 1 +
 framework/core/js/src/common/components/SplitDropdown.tsx     | 1 +
 framework/core/js/src/forum/components/AvatarEditor.js        | 1 +
 framework/core/js/src/forum/components/PostMeta.tsx           | 1 +
 framework/core/js/src/forum/components/PostStreamScrubber.js  | 2 +-
 framework/core/js/src/forum/components/ReplyPlaceholder.tsx   | 2 +-
 14 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/extensions/emoji/js/src/forum/addComposerAutocomplete.js b/extensions/emoji/js/src/forum/addComposerAutocomplete.js
index 7d6df93903..668bdaf842 100644
--- a/extensions/emoji/js/src/forum/addComposerAutocomplete.js
+++ b/extensions/emoji/js/src/forum/addComposerAutocomplete.js
@@ -70,6 +70,7 @@ export default function addComposerAutocomplete() {
           return (
             <Tooltip text={name}>
               <button
+                type="button"
                 key={emoji}
                 onclick={() => applySuggestion(emoji)}
                 onmouseenter={function () {
diff --git a/extensions/mentions/js/src/forum/components/MentionsDropdownItem.tsx b/extensions/mentions/js/src/forum/components/MentionsDropdownItem.tsx
index 48e0ffaadf..253da6a410 100644
--- a/extensions/mentions/js/src/forum/components/MentionsDropdownItem.tsx
+++ b/extensions/mentions/js/src/forum/components/MentionsDropdownItem.tsx
@@ -17,7 +17,7 @@ export default class MentionsDropdownItem<CustomAttrs extends IMentionsDropdownI
     const className = classList('MentionsDropdownItem', 'PostPreview', `MentionsDropdown-${mentionable.type()}`);
 
     return (
-      <button className={className} {...attrs}>
+      <button className={className} type="button" {...attrs}>
         <span className="PostPreview-content">{vnode.children}</span>
       </button>
     );
diff --git a/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js b/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js
index 378b15ddb4..05634f8e20 100644
--- a/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js
+++ b/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js
@@ -15,6 +15,7 @@ export default class PostQuoteButton extends Fragment {
     return (
       <button
         className="Button PostQuoteButton"
+        type="button"
         onclick={() => {
           reply(this.post, this.content);
         }}
diff --git a/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx b/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx
index 48c7584963..1b9f21e9df 100644
--- a/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx
+++ b/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx
@@ -279,6 +279,7 @@ export default class StatisticsWidget extends DashboardWidget {
             return (
               <button
                 className={classList('Button--ua-reset StatisticsWidget-entity', { active: this.selectedEntity === entity })}
+                type="button"
                 onclick={this.changeEntity.bind(this, entity)}
               >
                 <h3 className="StatisticsWidget-heading">{app.translator.trans('flarum-statistics.admin.statistics.' + entity + '_heading')}</h3>
diff --git a/framework/core/js/src/admin/components/AdminPage.tsx b/framework/core/js/src/admin/components/AdminPage.tsx
index 723ddd4bbb..d9c6866ad6 100644
--- a/framework/core/js/src/admin/components/AdminPage.tsx
+++ b/framework/core/js/src/admin/components/AdminPage.tsx
@@ -67,7 +67,7 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
    */
   submitButton(): Mithril.Children {
     return (
-      <Button onclick={this.saveSettings.bind(this)} className="Button Button--primary" loading={this.loading} disabled={!this.isChanged()}>
+      <Button type="submit" onclick={this.saveSettings.bind(this)} className="Button Button--primary" loading={this.loading} disabled={!this.isChanged()}>
         {app.translator.trans('core.admin.settings.submit_button')}
       </Button>
     );
diff --git a/framework/core/js/src/admin/components/PermissionsPage.tsx b/framework/core/js/src/admin/components/PermissionsPage.tsx
index 63a1195507..13557c1ed9 100644
--- a/framework/core/js/src/admin/components/PermissionsPage.tsx
+++ b/framework/core/js/src/admin/components/PermissionsPage.tsx
@@ -25,12 +25,12 @@ export default class PermissionsPage extends AdminPage {
             .all<Group>('groups')
             .filter((group) => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()!) === -1)
             .map((group) => (
-              <button className="Button Group" onclick={() => app.modal.show(EditGroupModal, { group })}>
+              <button className="Button Group" type="button" onclick={() => app.modal.show(EditGroupModal, { group })}>
                 <GroupBadge group={group} className="Group-icon" label={null} />
                 <span className="Group-name">{group.namePlural()}</span>
               </button>
             ))}
-          <button className="Button Group Group--add" onclick={() => app.modal.show(EditGroupModal)}>
+          <button className="Button Group Group--add" type="button" onclick={() => app.modal.show(EditGroupModal)}>
             <Icon name="fas fa-plus" className="Group-icon" />
             <span className="Group-name">{app.translator.trans('core.admin.permissions.new_group_button')}</span>
           </button>
diff --git a/framework/core/js/src/admin/components/UserListPage.tsx b/framework/core/js/src/admin/components/UserListPage.tsx
index bedf2b9548..5a26bcc13d 100644
--- a/framework/core/js/src/admin/components/UserListPage.tsx
+++ b/framework/core/js/src/admin/components/UserListPage.tsx
@@ -352,6 +352,7 @@ export default class UserListPage extends AdminPage {
               <button
                 onclick={toggleEmailVisibility}
                 className="Button Button--text UserList-emailIconBtn"
+                type="button"
                 title={app.translator.trans('core.admin.users.grid.columns.email.visibility_show')}
               >
                 <Icon name="far fa-eye-slash fa-fw" className="icon" />
diff --git a/framework/core/js/src/common/components/DetailedDropdownItem.tsx b/framework/core/js/src/common/components/DetailedDropdownItem.tsx
index 5663fa877b..14027fb895 100644
--- a/framework/core/js/src/common/components/DetailedDropdownItem.tsx
+++ b/framework/core/js/src/common/components/DetailedDropdownItem.tsx
@@ -21,7 +21,7 @@ export default class DetailedDropdownItem<
 > extends Component<CustomAttrs> {
   view() {
     return (
-      <button className="DetailedDropdownItem hasIcon" onclick={this.attrs.onclick}>
+      <button type="button" className="DetailedDropdownItem hasIcon" onclick={this.attrs.onclick}>
         <Icon name={this.attrs.active ? 'fas fa-check' : 'fas'} className="Button-icon" />
         <span className="DetailedDropdownItem-content">
           <Icon name={this.attrs.icon} className="Button-icon" />
diff --git a/framework/core/js/src/common/components/Dropdown.tsx b/framework/core/js/src/common/components/Dropdown.tsx
index b94b122904..b267f38b49 100644
--- a/framework/core/js/src/common/components/Dropdown.tsx
+++ b/framework/core/js/src/common/components/Dropdown.tsx
@@ -139,6 +139,7 @@ export default class Dropdown<CustomAttrs extends IDropdownAttrs = IDropdownAttr
   getButton(children: Mithril.ChildArray): Mithril.Vnode<any, any> {
     let button = (
       <button
+        type="button"
         className={'Dropdown-toggle ' + this.attrs.buttonClassName}
         aria-haspopup="menu"
         aria-label={this.attrs.accessibleToggleLabel}
diff --git a/framework/core/js/src/common/components/SplitDropdown.tsx b/framework/core/js/src/common/components/SplitDropdown.tsx
index 2275c8604e..3023ce73fa 100644
--- a/framework/core/js/src/common/components/SplitDropdown.tsx
+++ b/framework/core/js/src/common/components/SplitDropdown.tsx
@@ -45,6 +45,7 @@ export default class SplitDropdown<CustomAttrs extends ISplitDropdownAttrs = ISp
       <>
         {button}
         <button
+          type="button"
           className={'Dropdown-toggle Button Button--icon ' + this.attrs.buttonClassName}
           aria-haspopup="menu"
           aria-label={this.attrs.accessibleToggleLabel}
diff --git a/framework/core/js/src/forum/components/AvatarEditor.js b/framework/core/js/src/forum/components/AvatarEditor.js
index ff727e155b..9ed5fd3039 100644
--- a/framework/core/js/src/forum/components/AvatarEditor.js
+++ b/framework/core/js/src/forum/components/AvatarEditor.js
@@ -43,6 +43,7 @@ export default class AvatarEditor extends Component {
       <div className={classList(['AvatarEditor', 'Dropdown', this.attrs.className, this.loading && 'loading', this.isDraggedOver && 'dragover'])}>
         <Avatar user={user} loading="eager" />
         <button
+          type="button"
           className={user.avatarUrl() ? 'Dropdown-toggle' : 'Dropdown-toggle AvatarEditor--noAvatar'}
           title={app.translator.trans('core.forum.user.avatar_upload_tooltip')}
           ariaLabel={app.translator.trans('core.forum.user.avatar_upload_tooltip')}
diff --git a/framework/core/js/src/forum/components/PostMeta.tsx b/framework/core/js/src/forum/components/PostMeta.tsx
index 337cf99fca..fea9cb28fb 100644
--- a/framework/core/js/src/forum/components/PostMeta.tsx
+++ b/framework/core/js/src/forum/components/PostMeta.tsx
@@ -40,6 +40,7 @@ export default class PostMeta<CustomAttrs extends IPostMetaAttrs = IPostMetaAttr
     items.add(
       'time',
       <button
+        type="button"
         className={classList({
           'Button Button--text': true,
           'Dropdown-toggle Button--link': !!permalink,
diff --git a/framework/core/js/src/forum/components/PostStreamScrubber.js b/framework/core/js/src/forum/components/PostStreamScrubber.js
index b6955b611b..8a7fe3ed58 100644
--- a/framework/core/js/src/forum/components/PostStreamScrubber.js
+++ b/framework/core/js/src/forum/components/PostStreamScrubber.js
@@ -58,7 +58,7 @@ export default class PostStreamScrubber extends Component {
 
     return (
       <div className={classNames.join(' ')}>
-        <button className="Button Dropdown-toggle" data-toggle="dropdown">
+        <button type="button" className="Button Dropdown-toggle" data-toggle="dropdown">
           {viewing} <Icon name={'fas fa-sort'} />
         </button>
 
diff --git a/framework/core/js/src/forum/components/ReplyPlaceholder.tsx b/framework/core/js/src/forum/components/ReplyPlaceholder.tsx
index 797b781faf..03f301b460 100644
--- a/framework/core/js/src/forum/components/ReplyPlaceholder.tsx
+++ b/framework/core/js/src/forum/components/ReplyPlaceholder.tsx
@@ -54,7 +54,7 @@ export default class ReplyPlaceholder<CustomAttrs extends IReplyPlaceholderAttrs
       });
 
     return (
-      <button className="Post ReplyPlaceholder" onclick={reply}>
+      <button type="button" className="Post ReplyPlaceholder" onclick={reply}>
         <div className="Post-container">
           <div className="Post-side">
             <Avatar user={app.session.user} className="Post-avatar" />

From ebd21dab719ccbef1dfe275645f6cac997dad4a6 Mon Sep 17 00:00:00 2001
From: David Sevilla Martin <6401250+dsevillamartin@users.noreply.github.com>
Date: Fri, 30 May 2025 12:40:17 -0400
Subject: [PATCH 2/2] Prettier on framework

---
 framework/core/js/src/admin/components/AdminPage.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/framework/core/js/src/admin/components/AdminPage.tsx b/framework/core/js/src/admin/components/AdminPage.tsx
index d9c6866ad6..03bead19d0 100644
--- a/framework/core/js/src/admin/components/AdminPage.tsx
+++ b/framework/core/js/src/admin/components/AdminPage.tsx
@@ -67,7 +67,13 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
    */
   submitButton(): Mithril.Children {
     return (
-      <Button type="submit" onclick={this.saveSettings.bind(this)} className="Button Button--primary" loading={this.loading} disabled={!this.isChanged()}>
+      <Button
+        type="submit"
+        onclick={this.saveSettings.bind(this)}
+        className="Button Button--primary"
+        loading={this.loading}
+        disabled={!this.isChanged()}
+      >
         {app.translator.trans('core.admin.settings.submit_button')}
       </Button>
     );