fix: add hidden input with name attribute

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

@@ -208,6 +208,9 @@ export class DropdownSelect {
   @Prop() ariaLabelSelected?: string = 'selected';
   /** (optional) Text displayed in high contrast mode only to indicate disabled state */
   @Prop() hcmLabelDisabled?: string = 'this field is disabled';
+  /** (optional) is the element used in a form */
+  @Prop() formAssociated?: boolean = false;
+
 
   @Event({ eventName: 'scale-change' }) scaleChange!: EventEmitter<void>;
   @Event({ eventName: 'scale-focus' }) scaleFocus!: EventEmitter<void>;
@@ -227,8 +230,9 @@ export class DropdownSelect {
   @Watch('value')
   valueChange(newValue) {
     this.currentIndex = readOptions(this.hostElement).findIndex(
-      ({ value }) => value === newValue
+      ({ value }) => value === newValue     
     );
+    this.updateInputHidden(newValue) 
   }
 
   connectedCallback() {
@@ -259,6 +263,29 @@ 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();
+  }
+
+  private appendInputHidden(): void {
+    if (this.formAssociated) {
+      const input = document.createElement('input');
+      input.name = this.name;
+      input.id = this.name;
+      input.value = this.value;
+      input.type = 'hidden';
+      this.hostElement.appendChild(input);
+      }
+  }
+
+  private updateInputHidden(value: string = this.value): void {
+    if (this.formAssociated) {
+      this.hostElement.querySelector<HTMLInputElement>(`input[name=${this.name}]`).value = value;
+    }
+  }
+
   selectOption = (index) => {
     this.currentIndex = index;
     this.value = readOptions(this.hostElement)[index].value;