fix: Form disabled does not work for Form.InputGroup (#1575)

Co-authored-by: pengchen <[email protected]>

packages/semi-ui/form/_story/InputGroup/groupProps.jsx

@@ -178,6 +178,43 @@ const InputGroupDemo = () => {
                     <Form.Input style={{ width: 250 }} field='phoneNumber4' trigger={['mount', 'change']} validate={val => 'always errors'} rules={[{ required: true }]} showClear />
                 </Form.InputGroup>
             </Form>
+            <Form
+                disabled={true}
+                labelCol={{ span: 2 }}
+                wrapperCol={{ span: 22 }}
+            >
+                <Form.InputGroup
+                    label={{ text: (<span>手机号码</span>), required: true }}
+                    labelPosition='left'
+                    extraTextPosition='middle'
+                    extraText='i am extraText of Form.InputGroup'
+                    style={{ width: 400 }}
+                >
+                    <Form.Select style={{ width: 150 }} field='phonePrefix4' initValue='+86' rules={[{ required: true }]} showClear>
+                        <Form.Select.Option value='+1'>美国+1</Form.Select.Option>
+                        <Form.Select.Option value='+852'>香港+852</Form.Select.Option>
+                        <Form.Select.Option value='+86'>中国+86</Form.Select.Option>
+                        <Form.Select.Option value='+81'>日本+81</Form.Select.Option>
+                    </Form.Select>
+                    <Form.Input style={{ width: 250 }} field='phoneNumber4' trigger={['mount', 'change']} validate={val => 'always errors'} rules={[{ required: true }]} showClear />
+                </Form.InputGroup>
+                <Form.InputGroup
+                    label={{ text: (<span>手机号码</span>), required: true }}
+                    labelPosition='left'
+                    extraTextPosition='middle'
+                    extraText='i am extraText of Form.InputGroup'
+                    style={{ width: 400 }}
+                    disabled={false}
+                >
+                    <Form.Select style={{ width: 150 }} field='phonePrefix4' initValue='+86' rules={[{ required: true }]} showClear>
+                        <Form.Select.Option value='+1'>美国+1</Form.Select.Option>
+                        <Form.Select.Option value='+852'>香港+852</Form.Select.Option>
+                        <Form.Select.Option value='+86'>中国+86</Form.Select.Option>
+                        <Form.Select.Option value='+81'>日本+81</Form.Select.Option>
+                    </Form.Select>
+                    <Form.Input style={{ width: 250 }} field='phoneNumber4' trigger={['mount', 'change']} validate={val => 'always errors'} rules={[{ required: true }]} showClear />
+                </Form.InputGroup>
+            </Form>
         </>
     );
 };

packages/semi-ui/form/group.tsx

@@ -62,7 +62,7 @@ class FormInputGroup extends Component<InputGroupProps> {
     render() {
         const { children, label, extraText, extraTextPosition, ...rest } = this.props;
         const updater = this.context;
-        const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon', 'wrapperCol', 'labelCol']);
+        const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon', 'wrapperCol', 'labelCol', 'disabled']);
         const labelPosition = this.props.labelPosition || formProps.labelPosition;
         const groupFieldSet: Array<string> = [];
         const inner = React.Children.map(children, (child: any) => {
@@ -90,7 +90,7 @@ class FormInputGroup extends Component<InputGroupProps> {
 
         const labelContent = this.renderLabel(label, formProps);
         const inputGroupContent = (
-            <InputGroup {...rest}>
+            <InputGroup disabled={formProps.disabled} {...rest}>
                 {inner}
             </InputGroup>
         );