Add type="button" attribute to all buttons

[bilalmalkoc]

(edited by @Skaiir for clarity)

Describe the issue

Buttons in the form editor (and playground) aren't always configured to type "button", which makes them default to "submit" behavior which may submit an externally defined form accidentally.

Describe the solution you'd like

For clarity, and to avoid these kinds of interactions, we should:

• Ensure all editor and playground buttons are set to type "button", (pr)
• The same for the properties panel - need to raise an issue on that repo
• Make sure the button component itself cannot submit in the editor

[Skaiir]

@bilalmalkoc

Hi there. Could you clarify your request? Which buttons are you talking about, the button components? Could you explain your use case?

Do you mean that you would like the option to set the action type to be button? I think historically we haven't had this because we don't have any logic that can make use of it, but actually it does make sense to offer as some external code might want to subscribe to these button presses.

[bilalmalkoc]

Hello. That's not what I meant.
I am saying that all button elements you use in the builder should have type="button" attribute.
For example, all the elements in the fields I have marked are buttons, but since there is no type="button" attribute, when I click on them, the main form element is submitted. Therefore the form cannot be used.

I am using inside a form element like this:

<form>
  <div id="form-builder"></div>
</form>

The fact that there is no type="button" in the button elements in the builder causes the form to be submitted every time I click.

The same thing is in the Button field. This part is just a builder. Therefore, even if "Submit" or "Button" is selected from the right side, I think there will be no problem if the attribute type value is set to button.

[Skaiir]

@bilalmalkoc Ah I understand.

The thing is you're not supposed to put the entire editor inside of an HTML form, as it is not a form. I still think it's not a bad idea to set the buttons to type button on these elements, just for clarity, but wrapping the editor in a form doesn't make sense to me.

What are you trying to achieve with that?

[bilalmalkoc]

Yes, you are right that there is no form.

When we need to integrate the builder with some CMSs, we may need to put it in the form element. Like WordPress for example. Unfortunately I don't have an option to put it outside the form element. Because the entire page where I place it is inside a form element :)

I still think the correct usage is button attribute, don't you?

[Skaiir]

@bilalmalkoc I agree, but to fix this here also means changing the properties panel, so it requires some changes in external libraries + integration. I already created a PR for the changes on this library though.

#1081

[Skaiir]

But there may be the case where we're dependent on a library not owned by bpmn-io, and then you're just out of luck as we wouldn't be able to change the buttons. So I still think the correct fix is not to have the editor inside the form. To be completely safe, if you're really FORCED to render it inside the form, I would try and intercept the submission events programmatically. Because you never know.

[bilalmalkoc]

As I said, since it is a common CMS, it would not be good to control submission events. There could be thousands of plugins using the same form. But I'll see what I can do with this part.

Also, I am currently adding type="button" by doing search replace with ready event as a temporary solution. But I cannot do this in the form elements of the builder. I tried the click event, it is probably prevented.

If you have a solution for this, I can implement it.

Or if a callback like "focused" can be added to the form elements, this would also be useful. So we can manipulate the button elements inside every time there is focus.

[Skaiir]

Or if a callback like "focused" can be added to the form elements, this would also be useful. So we can manipulate the button elements inside every time there is focus.

Yeah if you'd like that, it's a feature request and we can separate that out in another ticket. We've already implemented in some other fields so it shouldn't be a tough sell.

Also, I am currently adding type="button" by doing search replace with ready event as a temporary solution. But I cannot do this in the form elements of the builder. I tried the click event, it is probably prevented.
If you have a solution for this, I can implement it.

I mean you can react to formEditor changed event, and apply your search replace logic then, but it's not ideal obviously. I'm surprised the buttons (fields) are even submitting in the editor, they should be disabled. Anyways there's a few fixes on this library that can be done, I just need to investigate why it submits at all first.

[bilalmalkoc]

Okay. Do you want me to open a new issue for a new callback request?

[Skaiir]

Yes please, if you want to implement it yourself that's also good, just please follow the feature request template and then we can discuss who and when it'll be worked on :)