Fix InputGroup.message=<StatusMessage> rendering two icons

.changeset/curly-ads-march.md

@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-react": minor
+---
+
+Fixed `LabeledSelect` bug where nested `<StatusMessage>`s were rendered when `message={<StatusMessage>}`. As a result, now when `typeof message!=="string"`, `message` is no longer automatically wrapped in `<StatusMessage>`. So you might need to manually wrap your custom `ReactNode` with `<StatusMessage>` for proper styling of `message`.

packages/itwinui-react/src/core/InputGroup/InputGroup.test.tsx

@@ -51,34 +51,50 @@ it('should render required group', () => {
   inputs.forEach((input) => expect(input.required).toBeTruthy());
 });
 
-it('should render message', () => {
-  const { container, getByText } = render(
-    <InputGroup
-      label='some label'
-      message={<div className='my-message'>Message</div>}
-    >
-      <Radio />
-      <Radio />
-      <Radio />
-    </InputGroup>,
-  );
-  expect(container.querySelector('.iui-input-grid')).toBeTruthy();
-  getByText('some label');
-  const message = container.querySelector('.my-message') as HTMLElement;
-  expect(message).toBeTruthy();
-  expect(message.textContent).toBe('Message');
-  expect(container.querySelectorAll('input').length).toBe(3);
-});
+it.each(['string', 'ReactNode'] as const)(
+  'should render message=%s',
+  (messageType) => {
+    const { container, getByText } = render(
+      <InputGroup
+        label='some label'
+        message={
+          messageType === 'string' ? (
+            'Message'
+          ) : (
+            <div className='my-message'>Message</div>
+          )
+        }
+      >
+        <Radio />
+        <Radio />
+        <Radio />
+      </InputGroup>,
+    );
+
+    expect(container.querySelector('.iui-input-grid')).toBeTruthy();
+    getByText('some label');
+
+    let message;
+    // Automatically wrap string message in `<StatusMessage />`
+    if (messageType === 'string') {
+      message = container.querySelector('.iui-status-message') as HTMLElement;
+    }
+    // Do not wrap ReactNode message in `<StatusMessage />`
+    else {
+      expect(container.querySelector('.iui-status-message')).toBeFalsy();
+      message = container.querySelector('.my-message') as HTMLElement;
+    }
+
+    expect(message).toBeTruthy();
+    expect(message.textContent).toBe('Message');
+  },
+);
 
 it.each(['positive', 'negative', 'warning'] as const)(
   'should render %s component',
   (status) => {
     const { container, getByText } = render(
-      <InputGroup
-        label='some label'
-        message={<div className='my-message'>Message</div>}
-        status={status}
-      >
+      <InputGroup label='some label' message='Message' status={status}>
         <Radio />
         <Radio />
         <Radio />

packages/itwinui-react/src/core/InputGroup/InputGroup.tsx

@@ -21,6 +21,10 @@ type InputGroupProps = {
   status?: 'positive' | 'warning' | 'negative';
   /**
    * Message below the group. Does not apply to 'inline' group.
+   *
+   * When `typeof message === "string"`, it is automatically wrapped with {@link StatusMessage}.
+   * If you are passing a non-string message that is not `<StatusMessage>`, you may need to wrap it with
+   * `<StatusMessage>` yourself for proper styling of `message`.
    */
   message?: React.ReactNode;
   /**
@@ -85,12 +89,9 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => {
     disabled = false,
     displayStyle = 'default',
     label,
-    message,
     status,
-    svgIcon,
     required = false,
     labelProps,
-    messageProps,
     innerProps,
     ...rest
   } = props;
@@ -121,18 +122,39 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => {
       >
         {children}
       </Box>
-      {(message || status || svgIcon) && (
-        <StatusMessage
-          iconProps={{
-            'aria-hidden': true,
-          }}
-          startIcon={svgIcon}
-          status={status}
-          {...messageProps}
-        >
-          {displayStyle !== 'inline' && message}
-        </StatusMessage>
-      )}
+      <BottomMessage {...props} />
     </InputGrid>
   );
 }) as PolymorphicForwardRefComponent<'div', InputGroupProps>;
+
+// ------------------------------------------------------------------------------------------------
+
+/**
+ * @private
+ * - When `typeof message !== 'string'`, `message` is returned as-is (e.g. when `message=<StatusMessage />`).
+ * - Else, it is wrapped in a `<StatusMessage />`.
+ */
+const BottomMessage = (props: InputGroupProps) => {
+  const { message, status, svgIcon, displayStyle, messageProps } = props;
+
+  if (message && typeof message !== 'string') {
+    return message;
+  }
+
+  if (message || status || svgIcon) {
+    return (
+      <StatusMessage
+        iconProps={{
+          'aria-hidden': true,
+        }}
+        startIcon={svgIcon}
+        status={status}
+        {...messageProps}
+      >
+        {displayStyle !== 'inline' && message}
+      </StatusMessage>
+    );
+  }
+
+  return undefined;
+};