fix: add hidden input with name attribute (#2212)

packages/components/src/components/dropdown-select/dropdown-select.tsx

@@ -229,6 +229,7 @@ export class DropdownSelect {
     this.currentIndex = readOptions(this.hostElement).findIndex(
       ({ value }) => value === newValue
     );
+    this.updateInputHidden(newValue);
   }
 
   connectedCallback() {
@@ -259,6 +260,27 @@ export class DropdownSelect {
     });
   }
 
+  // this workaround is needed to make the component work with form
+  // https://github.com/ionic-team/stencil/issues/2284
+  componentDidLoad() {
+    this.appendInputHidden();
+  }
+
+  appendInputHidden(): void {
+    const input = document.createElement('input');
+    input.name = this.name;
+    input.id = this.name;
+    input.value = this.value;
+    input.type = 'hidden';
+    this.hostElement.appendChild(input);
+  }
+
+  updateInputHidden(value: string = this.value): void {
+    this.hostElement.querySelector<HTMLInputElement>(
+      `input[name=${this.name}]`
+    ).value = value;
+  }
+
   selectOption = (index) => {
     this.currentIndex = index;
     this.value = readOptions(this.hostElement)[index].value;