[core] fix(InputGroup): right element padding adjusting on update (#3973)

Author: lexistein

packages/core/src/components/forms/inputGroup.tsx

@@ -129,12 +129,12 @@ export class InputGroup extends AbstractPureComponent2<IInputGroupProps & HTMLIn
     }
 
     public componentDidMount() {
-        if (this.rightElement != null) {
-            const { clientWidth } = this.rightElement;
-            // small threshold to prevent infinite loops
-            if (Math.abs(clientWidth - this.state.rightElementWidth) > 2) {
-                this.setState({ rightElementWidth: clientWidth });
-            }
+        this.updateInputWidth();
+    }
+
+    public componentDidUpdate(prevProps: IInputGroupProps & HTMLInputProps) {
+        if (prevProps.rightElement !== this.props.rightElement) {
+            this.updateInputWidth();
         }
     }
 
@@ -149,4 +149,16 @@ export class InputGroup extends AbstractPureComponent2<IInputGroupProps & HTMLIn
             </span>
         );
     }
+
+    private updateInputWidth() {
+        if (this.rightElement != null) {
+            const { clientWidth } = this.rightElement;
+            // small threshold to prevent infinite loops
+            if (Math.abs(clientWidth - this.state.rightElementWidth) > 2) {
+                this.setState({ rightElementWidth: clientWidth });
+            }
+        } else {
+            this.setState({ rightElementWidth: DEFAULT_RIGHT_ELEMENT_WIDTH });
+        }
+    }
 }