Reputation: 198
I am developing an add-in for Outlook using office-ui-fabric-react, using Typescript. I have a dialog that has a choice group, a text field, a default button, and a primary button, as shown here:
export interface ChoiceGroupDemoProps {
onChoiceGroupChange: (ev: React.FormEvent<HTMLInputElement>, option: any) => void;
onTextFieldChanged: (newText: string) => void;
onSubmit: () => void;
onCancel: () => void;
}
export const ChoiceGroupDemoForm: React.StatelessComponent<ChoiceGroupDemoProps> = (props: ChoiceGroupDemoProps): JSX.Element => {
return (
<div>
<div>
<ChoiceGroup
defaultSelectedKey='A'
options={[
{
key: 'A',
text: 'Test 1',
} as IChoiceGroupOption,
{
key: 'B',
text: 'Test 2'
},
{
key: 'C',
text: 'Test 3',
}
]}
required={true}
onChange={props.onChoiceGroupChange}
/>
<TextField
multiline
rows={4}
placeholder='Comments'
onChanged={props.onTextFieldChanged}
/>
<div>
<DefaultButton text='CANCEL' onClick={props.onCancel} />
<PrimaryButton text='SUBMIT' onClick={props.onSubmit}/>
</div>
</div>
</div>
);
};
The choice group radio buttons require two clicks to select a button, and typing in the text field deselects the radio buttons.
None of the examples show anything beyond a choice group by itself. How do I get a component to work with this combination of ui components?
Upvotes: 1
Views: 1077