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 }) {