Adding a decorator to a TextInput (React)

[MeesD94]

Hi all,

I'm trying to use the decorator Prop of a TextInput component to add a Close icon for clearing the input. This is a common action that Carbon suggests.

The documentation of a TextInput tells me the following:

  /**
   * **Experimental**: Provide a `decorator` component to be rendered inside the `TextInput` component
   */
  decorator?: ReactNode;

This tells me that I can pass any ReactNode to be rendered inside the TextInput. But if I look at the code, there is a check if the decorator is of type AILabel, which is not because I want to render a Close icon, that prevents anything from rendering.

Line 376 of TextInput.tsx

    const candidateIsAILabel = isComponentElement(candidate, AILabel);
    const normalizedDecorator = candidateIsAILabel
      ? cloneElement(candidate, { size: 'mini' })
      : null;

Am I missing something?

Thanks in advance.

[maradwan26]

Hello @MeesD94, does this issue still exist in the latest version? I am able to render a Close icon in the TextInput like so:

import { TextInput } from '@carbon/react';
import { Close } from '@carbon/icons-react';

... 

<TextInput id="test" labelText="label" decorator={<Close />} />

Stackblitz: https://stackblitz.com/edit/github-sqag8s3u?file=src%2FApp.tsx