fix: Add form support

domain/domain.go

@@ -33,6 +33,14 @@ func AutocompleteCity(s string, limitResults int) (results []string) {
 	return results
 }
 
+func Cities() []CityName {
+	c := make([]CityName, len(cities))
+	for i := range cities {
+		c[i] = CityName{cities[i]}
+	}
+	return c
+}
+
 type CityName struct{ string }
 
 func (c CityName) String() string { return c.string }

server/components/input-autocomplete.ts

@@ -29,6 +29,7 @@ export default class InputAutocomplete extends LitElement {
   @state() currentInput: string = "";
   @state() loadingAutocompletion: boolean = false;
 
+  static formAssociated = true;
   static styles = css`
     :host {
       display: inline-block;
@@ -40,10 +41,12 @@ export default class InputAutocomplete extends LitElement {
   `;
 
   #endpointURL: URL | null = null;
-  private debounceTimer = null as ReturnType<typeof setTimeout> | null;
+  #debounceTimer = null as ReturnType<typeof setTimeout> | null;
+  #internals: ElementInternals | null = null;
 
   connectedCallback(): void {
     super.connectedCallback();
+    this.#internals = this.attachInternals();
     this.#endpointURL = new URL(
       `${window.location.origin}/${this.jsonAPIEndpoint}`
     );
@@ -57,6 +60,7 @@ export default class InputAutocomplete extends LitElement {
   ) {
     if (changedProperties.has("value")) {
       this.currentInput = this.value || "";
+      this.#internals?.setFormValue(this.currentInput);
     }
   }
 
@@ -88,6 +92,7 @@ export default class InputAutocomplete extends LitElement {
 
   #onSelect(e: SlSelectEvent) {
     this.currentInput = e.detail.item.value;
+    this.#internals?.setFormValue(this.currentInput);
     this.elDropdown.hide();
   }
 
@@ -99,12 +104,12 @@ export default class InputAutocomplete extends LitElement {
     if (this.currentInput == "") {
       return;
     }
-    if (this.debounceTimer) {
-      clearTimeout(this.debounceTimer);
+    if (this.#debounceTimer) {
+      clearTimeout(this.#debounceTimer);
     }
-    this.debounceTimer = setTimeout(() => {
+    this.#debounceTimer = setTimeout(() => {
       this.#showSuggestions();
-      this.debounceTimer = null;
+      this.#debounceTimer = null;
     }, this.debounceMS);
   }
 
@@ -134,6 +139,7 @@ export default class InputAutocomplete extends LitElement {
 
   #emitSelectEvent() {
     if (this.currentInput) {
+      this.#internals?.setFormValue(this.currentInput);
       this.dispatchEvent(
         new CustomEvent("sl-select", {
           detail: {

server/server.go

@@ -239,7 +239,7 @@ func (s *Server) handlePostFormRandomize(w http.ResponseWriter, r *http.Request)
 	}
 	destinationCountry := rand.Item(domain.DestinationCountryValues())
 	f.ValueAddressCountry = destinationCountry.String()
-	f.ValueAddressCity = gofakeit.City()
+	f.ValueAddressCity = rand.Item(domain.Cities()).String()
 	f.ValueAddressPostalCode = rand.String("ABCDEFGHIKLMNOPQ1234567890", 6, 9)
 
 	if err := template.RenderComponentForm(

server/template/template.templ

@@ -97,6 +97,16 @@ templ viewIndex(
 						<td>Email</td>
 						<td>{ o.ContactEmail.String() } </td>
 					</tr>
+					<tr>
+						<td>Destination Address</td>
+						<td>
+							{ o.DestinationAddress.Country.String() +
+								" | " +
+								o.DestinationAddress.City.String() +
+								" | " +
+								o.DestinationAddress.PostalCode.String() }
+						</td>
+					</tr>
 					<tr>
 						<td>Phone</td>
 						<td>{ o.ContactPhone.String() } </td>