FormField or TextInput shows focus indicator even when focusIndicator prop is set to false on both

Expected Behavior

Focus indicator borders defined in theme should not be visible when focusIndicator prop is set to false.

Actual Behavior

Focus indicator borders are visible around: <FormField>, <TextInput> and label

Provided codesandbox example is broken for some reason so I will provide relevant code here:

  const contentProps: FormFieldProps['contentProps'] = {
    focusIndicator: false,
    // Toggle background color & border
    background: isEditing || isHovered ? colors.backgroundBack : undefined,
    direction: 'row',
    gap: 'xsmall',
    border: {
      color: isEditing ? colors.brand : undefined,
    },
  }

    <Form
      value={{ [name.current]: newValue }}
      onChange={handleTextInputChange}
      onSubmit={handleSubmit}
      ref={formRef as any}
    >
      <FormField
        {...formFieldProps}
        name={name.current}
        htmlFor={id.current}
        label={label}
        contentProps={contentProps}
        onClick={handleFormFieldClick}
        onBlur={handleFormFieldBlur}
      >
        <TextInput
          {...textInputProps}
          id={id.current}
          name={name.current}
          focusIndicator={false}
          color={colors.textStrong}
        />
        {isTouched && <Button type="submit" icon={<MdSend size="1.25em" />} plain />}
      </FormField>
    </Form>

Your Environment

• Grommet version: ^2.14.0
• Browser Name and version: Brave@Version 1.14.84 Chromium: 85.0.4183.121 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Windows 10

[leossantiago]

So, for a better explanation, I’ll split this issue in two parts: FormField behavior and TextInput behavior.

• FormField behavior

This component is based on <Box>, thus it receives a focus outline when onClick prop is set. Box-kind components can also receive focusIndicator prop (differently of input components, those don’t need plain prop to use focusIndicator), and it looks like it’s working as expected.

FormField also has a child called <FormFieldContentBox>, which wraps the content passed by the user as children of <FormField> and is also based on <Box>. The prop contentProps you’re using controls the properties of <FormFieldContentBox> and not, for instance, the props of <TextInput> nor <FormField> itself. Since this ContentBox is not receiving an onClick prop, it’s no use passing focusIndicator.

To achieve what you’re looking for, you should set focusIndicator as prop of FormField. Note that it’ll still have a border outline when focused. This can be removed by manually styling it with outline: 'none';.

I don’t think anything should be changed on grommet components regarding this part of the issue.

• TextInput behavior

TextInput alongside TextArea and MaskedInput make use of an internal styling called inputStyle. Right now, focusIndicator wasn’t working as intended in those components. PR #4753 addresses that, fixing it. Note that focusIndicator prop on inputs should only work when using plain prop.

---

IMHO that resolves the issue, but let us know if you still have any unexpected behavior after this.

[leossantiago]

Even without a working codesandbox example, would you mind providing the component code and custom theming (if there’s any) used to reproduce your screenshot? It might be helpful to anyone who tackles this issue. Thanks 😃