Does Input support inline custom components?

[HaveSpacesuit]

You can add a custom button to an input component, but it appears that the layout is messed up if using any custom component. Is this intentional? Is there a way to support it?

https://codesandbox.io/s/itwinui-react-minimal-example-forked-e6ecit?file=/src/App.tsx

[HaveSpacesuit]

It looks like using non-jsx gets this to work as I want:

<LabeledInput
  placeholder="Enter text here..."
  label="This is a label"
  svgIcon={MyButton()}
  iconDisplayStyle="inline"
/>

[mayank99]

The problem here is that your custom component does not take any props. It will work if you forward the props.

function MyButton(props: IconButtonProps) {
  return (
    <IconButton styleType="borderless" {...props}>
      <SvgCloseSmall />
    </IconButton>
  );
}

This is because we clone the icon and pass it a className.

iTwinUI-react/packages/iTwinUI-react/src/core/utils/components/InputContainer.tsx

Lines 76 to 79 in e43d3e1

	{icon &&
	React.cloneElement(icon, {
	className: cx('iui-input-icon', icon.props?.className),
	})}

In the future we might change the approach to avoid cloning (it is considered bad practice) and instead add a wrapper. That should get rid of this limitation.

Hope that helps.