Vaadin Button in Forms

Hello! I am using Vaadin components in TypeScript and I have found myself in the following situation, I have a form and the button does not submit it, I assume that the Button component internally does not have the type property. Is there any way to make it work?

<form action="/api/auth/sign-in" method="post">
  <vaadin-email-field name="email" label="Email Address"></vaadin-email-field>
  <vaadin-password-field name="password" label="Password"></vaadin-password-field>
  <vaadin-button type='submit' theme="primary">Login</vaadin-button>

Hello! You could submit the form programmatically on button click:

  const form = document.querySelector('form');
  const button = form.querySelector('vaadin-button');
  button.addEventListener('click', () => form.submit());
1 Like

Thanks for the answer @virkki
I have other use case, here i need to send the implicit formData, but name and value are undefined because Button don’t have those properties. In the future, it would be a good idea for the team to consider adding those properties to the component.

<form action="/api/auth/sign-in" method="post" id="socialSignIn" >
		aria-label="Sign in with Google">
		<vaadin-icon src="/google.svg"></vaadin-icon>
		aria-label="Sign in with Github">
		<vaadin-icon src="/github.svg"></vaadin-icon>

For now I have solved it by adding a hidden input to make use of its properties

const form = document.querySelector("#socialSignIn")
const handleSocialSignIn = (event: MouseEvent) => {
	if (form instanceof HTMLFormElement) {
		const vaadinButton = event.currentTarget as Button
		const name = vaadinButton.getAttribute("name") as string
		const value = vaadinButton.getAttribute("value") as string
		const input = document.createElement("input")
		input.type = "hidden" = name
		input.value = value