chore: explicitely define type button on non-submit-button elements

Related to #1077
bpmn-io · Mar 4, 2024 · b79f3c4 · b79f3c4
1 parent f43adfc
commit b79f3c4
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 8 deletions.
diff --git a/packages/form-js-editor/src/features/palette/components/Palette.js b/packages/form-js-editor/src/features/palette/components/Palette.js
@@ -114,7 +114,7 @@ export function Palette(props) {
         onInput={ handleInput } />
       {
         searchTerm && (
-          <button title="Clear content" class="fjs-palette-search-clear" onClick={ handleClear }>
+          <button type="button" title="Clear content" class="fjs-palette-search-clear" onClick={ handleClear }>
             <CloseIcon></CloseIcon>
           </button>
         )

diff --git a/packages/form-js-editor/src/features/palette/components/PaletteEntry.js b/packages/form-js-editor/src/features/palette/components/PaletteEntry.js
@@ -28,6 +28,7 @@ export function PaletteEntry(props) {
 
   return (
     <button
+      type="button"
       class="fjs-palette-field fjs-drag-copy fjs-no-drop"
       data-field-type={ type }
       title={ `Create ${getIndefiniteArticle(type)} ${label} element` }

diff --git a/packages/form-js-editor/src/render/components/FormEditor.js b/packages/form-js-editor/src/render/components/FormEditor.js
@@ -222,7 +222,7 @@ function Element(props) {
       <ContextPad>
         {
           selection.isSelected(field) && field.type !== 'default'
-            ? <button title={ getRemoveButtonTitle(field, formFields) } class="fjs-context-pad-item" onClick={ onRemove }><DeleteIcon /></button>
+            ? <button type="button" title={ getRemoveButtonTitle(field, formFields) } class="fjs-context-pad-item" onClick={ onRemove }><DeleteIcon /></button>
             : null
         }
       </ContextPad>

diff --git a/packages/form-js-playground/src/components/Modal.js b/packages/form-js-playground/src/components/Modal.js
@@ -28,7 +28,7 @@ export function Modal(props) {
           { props.children }
         </div>
         <div class="fjs-pgl-modal-footer">
-          <button class="fjs-pgl-button fjs-pgl-button-default" onClick={ props.onClose }>Close</button>
+          <button type="button" class="fjs-pgl-button fjs-pgl-button-default" onClick={ props.onClose }>Close</button>
         </div>
       </div>
     </div>

diff --git a/packages/form-js-playground/src/components/PlaygroundRoot.js b/packages/form-js-playground/src/components/PlaygroundRoot.js
@@ -273,6 +273,7 @@ export function PlaygroundRoot(props) {
           {
             displayActions && <Section.HeaderItem>
               <button
+                type="button"
                 class="fjs-pgl-button"
                 title="Download form definition"
                 onClick={ handleDownload }
@@ -283,6 +284,7 @@ export function PlaygroundRoot(props) {
           {
             displayActions && <Section.HeaderItem>
               <button
+                type="button"
                 class="fjs-pgl-button"
                 onClick={ showEmbedModal }
               >Embed</button>

diff --git a/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js b/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
@@ -153,12 +153,12 @@ export class RepeatRenderManager {
         }) }
     >
       {
-        showAdd ? <button readOnly={ readonly } disabled={ disabled || readonly } class="fjs-repeat-render-add" type="button" ref={ addButtonRef } onClick={ onAddItem }>
+        showAdd ? <button type="button" readOnly={ readonly } disabled={ disabled || readonly } class="fjs-repeat-render-add" ref={ addButtonRef } onClick={ onAddItem }>
           <><AddSvg /> { 'Add new' }</>
         </button> : null
       }
       {
-        collapseEnabled ? <button class="fjs-repeat-render-collapse" type="button" onClick={ toggle }>
+        collapseEnabled ? <button type="button" class="fjs-repeat-render-collapse" onClick={ toggle }>
           {
             isCollapsed
               ? <><ExpandSvg /> { `Expand all (${values.length})` }</>
@@ -229,7 +229,7 @@ const RepetitionScaffold = (props) => {
           <RowsRenderer { ...elementProps } />
         </LocalExpressionContext.Provider>
       </div>
-      <button class="fjs-repeat-row-remove" type="button" aria-label={ `Remove list item ${index + 1}` } onClick={ () => onDeleteItem(index) }>
+      <button type="button" class="fjs-repeat-row-remove" aria-label={ `Remove list item ${index + 1}` } onClick={ () => onDeleteItem(index) }>
         <div class="fjs-repeat-row-remove-icon-container">
           <DeleteSvg />
         </div>

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Number.js b/packages/form-js-viewer/src/render/components/form-fields/Number.js
@@ -223,15 +223,15 @@ export function Numberfield(props) {
         <div class={ classNames('fjs-number-arrow-container', { 'fjs-disabled': disabled, 'fjs-readonly': readonly }) }>
           { /* we're disabling tab navigation on both buttons to imitate the native browser behavior of input[type='number'] increment arrows */ }
           <button
-            class="fjs-number-arrow-up"
             type="button"
+            class="fjs-number-arrow-up"
             aria-label="Increment"
             onClick={ () => increment() }
             tabIndex={ -1 }><AngelUpIcon /></button>
           <div class="fjs-number-arrow-separator" />
           <button
-            class="fjs-number-arrow-down"
             type="button"
+            class="fjs-number-arrow-down"
             aria-label="Decrement"
             onClick={ () => decrement() }
             tabIndex={ -1 }><AngelDownIcon /></button>