From 13d2d115d44f109c3ea2a47bcb518c6090126325 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 16 May 2023 09:50:56 -0400
Subject: [PATCH] fix(select): modern syntax works with forms (#27480)

Issue number: resolves #27478

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The modern syntax render function was missing `renderHiddenInput` which
caused modern `ion-select` instances to not participate in form
submission. Legacy syntax is not affected.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Modern syntax calls `renderHiddenInput`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


Dev build: `7.0.7-dev.11684158250.1920157d`
---
 core/src/components/select/select.tsx         |  4 +++-
 .../components/select/test/select.spec.tsx    | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 core/src/components/select/test/select.spec.tsx

diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 8f51db99e1..f55ddac853 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -745,7 +745,7 @@ export class Select implements ComponentInterface {
   }
 
   private renderSelect() {
-    const { disabled, el, isExpanded, labelPlacement, justify, placeholder, fill, shape } = this;
+    const { disabled, el, isExpanded, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
     const mode = getIonMode(this);
     const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
     const justifyEnabled = !hasFloatingOrStackedLabel;
@@ -753,6 +753,8 @@ export class Select implements ComponentInterface {
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
 
+    renderHiddenInput(true, el, name, parseValue(value), disabled);
+
     return (
       <Host
         onClick={this.onClick}
diff --git a/core/src/components/select/test/select.spec.tsx b/core/src/components/select/test/select.spec.tsx
new file mode 100644
index 0000000000..3d4620571a
--- /dev/null
+++ b/core/src/components/select/test/select.spec.tsx
@@ -0,0 +1,22 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Select } from '../select';
+
+describe('ion-select', () => {
+  it('should render hidden input for form validation', async () => {
+    const page = await newSpecPage({
+      components: [Select],
+      template: () => <ion-select value="my value" name="my name" disabled={true}></ion-select>,
+    });
+
+    const select = page.body.querySelector('ion-select');
+
+    const hiddenInput = select.querySelector('input[type="hidden"]');
+    expect(hiddenInput).not.toBe(null);
+
+    expect(hiddenInput.value).toBe('my value');
+    expect(hiddenInput.disabled).toBe(true);
+    expect(hiddenInput.name).toBe('my name');
+  });
+});