TextInput component lose's ref

The use of ref on TextInput does not work as expected. When I try to focus input on first render I get error, because of ref is undefined

 const StyledTextInput = styled(TextInput)`
  border: ${({ theme }) => `1px solid ${theme.global.colors.paletteGray10}`};
  padding-top: ${({ theme }) => theme.global.edgeSize.xsmall};
  padding-bottom: ${({ theme }) => theme.global.edgeSize.xsmall};
  border-radius: 0.3rem;
  width: 100%;
`;

const searchRef = useRef();

  useEffect(() => {
    searchRef.current.focus();
  }, []);

    <StyledTextInput
          ref={searchRef}
          type="text"
          onChange={onChangeTextInput}
          value={searchText}
     />

When I tryed to use simple <input> all works as expected

 <input
          ref={searchRef}
          type="text"
          onChange={onChangeTextInput}
          value={searchText}
          placeholder={searchPlaceholder}
          data-automation-id={`${dataAutomationId}-search`}
        />

Expected Behavior

ref should point on TextInput

Actual Behavior

URL, screen shot, or Codepen exhibiting the issue

Steps to Reproduce

Your Environment

• Grommet version: v2.10.0
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): macOs

[coltonw]

https://codesandbox.io/s/cannot-read-property-focus-of-undefined-j0cjp

Seems like it is just failing in our unit tests because our unit tests didn’t have a theme wrapper before. If you wrap it in a Grommet component with a theme, it works fine. Not sure how defensive you want to code that but figured it was worth noting at least for future developers.

[ShimiSun]

Thanks @IanKBovard & @lllllllqw for collaborating on this, @lllllllqw feel free to make code contributions that will help to improve grommet Class component ref support.