Mr. Lee
Mr. Lee

Reputation: 198

Office-ui-fabric-react choice group incorrect behavior when in same component as a text field

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

Answers (1)

Mr. Lee
Mr. Lee

Reputation: 198

Upgrading to version 6.153.0 solved the problem.

Upvotes: 1

Related Questions