Merge pull request #250 from brionmario/fix-asgardeo-v2-signup

feat: add `Select` support for `DROPDOWN` types

Author: brionmario

.changeset/all-plants-teach.md

@@ -0,0 +1,5 @@
+---
+'@asgardeo/react': patch
+---
+
+Add `Select` support for `DROPDOWN` types

packages/react/src/components/adapters/SelectInput.tsx

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FieldType} from '@asgardeo/browser';
+import {FC} from 'react';
+import {BaseSignUpOptionProps} from '../presentation/SignUp/SignUpOptionFactory';
+import {createField} from '../factories/FieldFactory';
+import {SelectOption} from '../primitives/Select/Select';
+
+/**
+ * Select input component for sign-up forms.
+ */
+const SelectInput: FC<BaseSignUpOptionProps> = ({
+  component,
+  formValues,
+  touchedFields,
+  formErrors,
+  onInputChange,
+  inputClassName,
+}) => {
+  const config: Record<string, unknown> = component.config || {};
+  const fieldName: string = (config['identifier'] as string) || (config['name'] as string) || component.id;
+  const value: string = formValues[fieldName] || '';
+  const error: string = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
+
+  // Get options from config and convert to SelectOption format
+  const rawOptions: string[] = (config['options'] as string[]) || [];
+  const options: SelectOption[] = rawOptions.map((option: string) => ({
+    label: option,
+    value: option,
+  }));
+
+  return createField({
+    type: FieldType.Select,
+    name: fieldName,
+    label: (config['label'] as string) || '',
+    placeholder: (config['placeholder'] as string) || '',
+    required: (config['required'] as boolean) || false,
+    value,
+    error,
+    options,
+    onChange: (newValue: string): void => onInputChange(fieldName, newValue),
+    className: inputClassName,
+  });
+};
+
+export default SelectInput;

packages/react/src/components/presentation/SignUp/SignUpOptionFactory.tsx

@@ -29,6 +29,7 @@ import PasswordInput from '../../adapters/PasswordInput';
 import ButtonComponent from '../../adapters/SubmitButton';
 import TelephoneInput from '../../adapters/TelephoneInput';
 import TextInput from '../../adapters/TextInput';
+import SelectInput from '../../adapters/SelectInput';
 import Typography from '../../adapters/Typography';
 import GoogleButton from '../../adapters/GoogleButton';
 import GitHubButton from '../../adapters/GitHubButton';
@@ -201,6 +202,9 @@ export const createSignUpComponent = ({component, onSubmit, ...rest}: BaseSignUp
     case EmbeddedFlowComponentType.Form:
       return <FormContainer component={component} onSubmit={onSubmit} {...rest} />;
 
+    case EmbeddedFlowComponentType.Select:
+      return <SelectInput component={component} onSubmit={onSubmit} {...rest} />;
+
     case EmbeddedFlowComponentType.Divider:
       return <DividerComponent component={component} onSubmit={onSubmit} {...rest} />;
 

packages/react/src/components/presentation/SignUp/transformer.ts

@@ -96,6 +96,7 @@ const convertSimpleInputToComponent = (
     name: string;
     type: string;
     required: boolean;
+    options?: string[];
   },
   t: UseTranslation['t'],
 ): EmbeddedFlowComponent => {
@@ -108,6 +109,28 @@ const convertSimpleInputToComponent = (
     fieldType = 'password';
   }
 
+  // Handle dropdown type
+  if (input.type.toLowerCase() === 'dropdown') {
+    const label: string = getInputLabel(input.name, fieldType, t);
+    const placeholder: string = getInputPlaceholder(input.name, fieldType, t);
+
+    return {
+      id: generateId('select'),
+      type: EmbeddedFlowComponentType.Select,
+      variant: 'SELECT',
+      config: {
+        type: fieldType,
+        label,
+        placeholder,
+        required: input.required as boolean,
+        identifier: input.name,
+        hint: '',
+        options: input.options || [],
+      },
+      components: [],
+    };
+  }
+
   const variant: 'TEXT' | 'EMAIL' | 'PASSWORD' = getInputVariant(fieldType, input.name);
   const label: string = getInputLabel(input.name, fieldType, t);
   const placeholder: string = getInputPlaceholder(input.name, fieldType, t);