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 ( { + it('should render hidden input for form validation', async () => { + const page = await newSpecPage({ + components: [Select], + template: () => , + }); + + 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'); + }); +});