workspace-search buttons need type=button

[admalledd]

Check for duplicates

• [x] I have searched for similar issues before opening a new one.

Component

workspace-search's createBtn private helper method

Description

We are using Blockly inside a <form> element (for various reasons), and the existing createBtn function does not set the <button> to be <button type='button'> which means when users click them it erroneously causes a form-submit.

The fix should in theory works on my machine(tm), be as simple as changing the helper function to read something akin to:

  private createBtn(className: string, text: string): HTMLButtonElement {
    // Create the button
    const btn = document.createElement('button');
    Blockly.utils.dom.addClass(btn, className);
    btn.type = "button"; //++added++
    btn.setAttribute('aria-label', text);
    return btn;
  }

Reproduction steps

1. Have a Blockly instance nested within a <form>
2. Have the workspace-search plugin installed in the workspace
3. ctrl-f for something, then hit any of the three buttons (next, prev, exit)
4. Find that your HTML Form is now Submitted :(

Stack trace

Screenshots

No response

[maribethb]

Hi @admalledd thanks for filing! We'd accept a PR for this if you'd like to submit your fix. Thanks!

[admalledd]

@maribethb due to the language of my current work contract, that is difficult, hence provided the sample diff/line change in the issue above. I can open issues, discuss fixes, etc, but am not allowed to submit code under my own authorship if it relates to my work. :/

[viky-01]

@rachel-fenichel kindly review the fixes

[viky-01]

@BenHenning, apologies for the delay. Also, thanks for the support and patience.

[uniiquecornnx]

i want to work on this because it's a small but important fix that helps prevent bugs when using forms. Setting type="button" avoids accidental form submissions, which can cause confusing behavior for users. it’s also a great way for me to start contributing by improving the user experience and learning the codebase through a focused change