FormField render render a border for children input inside custom component

When I use a custom component, with an input field, as child of a FormField I have the bottom border from FormField and the full border from the input field.

Here an example using a composed field for password input and a plain TextInput

https://codesandbox.io/s/wrong-border-for-form-field-bbyuf

[ShimiSun]

Thanks for reporting guys, just to make sure you know you can remove the border from the theme https://v2.grommet.io/formfield#formField.border.side, but I’m aware it will affect all of your FormFields and not just the custom component one.

This issue makes me think we need to consider a border prop on the FormField component and not just on the theme.

[megothss]

The FormField component is testing the displayName property of the child component to decide the style of the border / padding:

const grommetInputNames = [
  'CheckBox',
  'CheckBoxGroup',
  'TextInput',
  'Select',
  'MaskedInput',
  'TextArea',
  'DateInput',
  'FileInput',
  'RadioButtonGroup',
];

    let contents =
      (themeBorder &&
        children &&
        Children.map(children, (child) => {
          if (
            child &&
            child.type &&
            grommetInputPadNames.indexOf(child.type.displayName) !== -1
          ) {
            wantContentPad = true;
          }
          if (
            child &&
            child.type &&
            grommetInputNames.indexOf(child.type.displayName) !== -1 &&
            child.props.plain === undefined &&
            child.props.focusIndicator === undefined
          ) {
            return cloneElement(child, {
              plain: true,
              focusIndicator: false,
            });
          }
          return child;
        })) ||
      children;

As a workaround it is possible to rename the displayName property of the custom component to one in the list that it is tested. Something like the code below:

export const CustomSelect = ({disabled, loading, ...props}) => {
  return (
    <Select
      {...props}
      icon={loading ? <Spinner /> : <FormDown />}
      disabled={disabled || loading}
      dropHeight="medium"
      ...
    />
  );
};

CustomSelect.displayName = 'Select';

It would be nice if we could provide a custom property to let Grommet know that the custom component should be treated as an input. CustomComponent.isGrommetInput = true for example.