GovAlta/ui-components

[Bug]: goa-button with 'type="submit"' does not render a button of 'type="submit"'

Closed this issue · 0 comments

Describe the bug

Using <goa-button type="submit"> does not render a <button type="submit"> in the shadow-root. It is a regular button. When using this type of goa-button with a form, the form doesn't get submitted when the button is clicked.

Provide Code

import 'zone.js/dist/zone';
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
import { AngularComponentsModule } from '@abgov/angular-components';
import '@abgov/web-components';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, AngularComponentsModule, FormsModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <h1>Test Form</h1>
    <form #formData="ngForm" (ngSubmit)="onSubmit(formData.value)">
      <div class="form-group">
        <div for="name">Name</div>
        <input type="text" class="form-control" id="name" name="name" ngModel>
      </div>
      <goa-button
        type="submit"
      >Submit</goa-button>
      <!-- <button type="submit">Submit</button> -->
    <form>
  `,
})
export class App {
  onSubmit(data: any) {
    alert(`Hello ${data.name}`);
  }
}

bootstrapApplication(App);

To Reproduce

  1. Fill out the form.
  2. Click the submit button.

Expected result:
An alert that shows "Hello ", where name is the value you entered in the form.

Actual result:
Nothing happens

Additional context

I also included a basic submit button that can be switched out. Clicking on it gives the expected result.