diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx
index e4d0782218..b343ffcc1c 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/SurveyStep.jsx
@@ -10,7 +10,6 @@ import {
SelectVariant,
} from '@patternfly/react-core';
import FormField from '../../FormField';
-import AnsibleSelect from '../../AnsibleSelect';
import Popover from '../../Popover';
import {
required,
@@ -92,12 +91,16 @@ function NumberField({ question }) {
}
function MultipleChoiceField({ question }) {
- const [field, meta] = useField({
+ const [field, meta, helpers] = useField({
name: `survey_${question.variable}`,
validate: question.required ? required(null) : null,
});
+ const [isOpen, setIsOpen] = useState(false);
const id = `survey-question-${question.variable}`;
const isValid = !(meta.touched && meta.error);
+
+ const options = question.choices.split('\n');
+
return (
}
>
- {
+ helpers.setValue(option);
+ setIsOpen(false);
+ }}
+ selections={field.value}
+ variant={SelectVariant.single}
id={id}
isValid={isValid}
- {...field}
- data={question.choices.split('\n').map(opt => ({
- key: opt,
- value: opt,
- label: opt,
- }))}
- />
+ isOpen={isOpen}
+ placeholderText={t`Select an option`}
+ onClear={() => {
+ helpers.setTouched(true);
+ helpers.setValue('');
+ }}
+ >
+ {options.map(opt => (
+
+ ))}
+
);
}
@@ -145,6 +159,7 @@ function MultiSelectField({ question }) {