Undocumented <SkipLinks /> component swallowing <TAB> keypress event with React 16

I apologize in advance, but unfortunately I am cannot repro this in a CodePen. I am posting here as a broad call for help from maintainers for tips/clues.

Grommet 1.x misbehaves with react and react-dom @ 16.x in terms of keyboard event behavior when pressing the tab key.

Our app fails to traverse focus from standard <input type="text"> elements due to (or related to) the undocumented <SkipLinks /> component.

Possible culprits:

• components/SkipLinks.js (tab key capture appears to execute here, but does not bubble)
• utils/KeyboardAccelerators.js
• utils/DOM.js (perhaps something with generateId ?)

Expected Behavior

• Form <input> elements should blur + focus next input when pressing tab key

Actual Behavior

• Focus fails to leave currently focused form element

Your Environment

• Grommet version: 1.8.3
• Browser Name and version: Chrome 62.0.3202.89
• Operating System and version (desktop or mobile): desktop; macOS 10.12 + Ubuntu 17.10

App Structure

<App>
  <Sidebar>
    <!-- content -->
  </Sidebar>
  <Split flex="right" showOnResponsive="both">
    <div>
      <!-- some other split content -->
    </div>
    <Split flex="right" showOnResponsive="both">
      <Form>
        <FormField>
          <TextInput name="email" />
        </FormField>
        <FormField>
          <TextInput name="password" />
        </FormField>
        <button type="submit" value="Login" />
      </Form>
     </Split>
     <div />
  </Split>
</App>

---

Thanks in advance for any insight offered.

[alansouzati]

Palo Alto, CA. If you ever come to the bay area let us know, we can schedule a happy hour 🍻

It is always good to chat with the community and grab info on things they like/not like about Grommet 👍

[alansouzati]

cool. let me work on releasing a new grommet version. We should have 1.9.0 by the end of the day!