Dropdown (PF4): When the first DropdownItem in the Dropdown has an onClick handler keyboard navigation does not work

As the title says - when the first item in the DropdownItems has an onClick handler that will consume the space key down on the dropdown element, which is supposed to expand the dropdown, and the keyboard navigation will not work properly.

Reproducer is the following code:

import React from 'react';
import {
  Dropdown,
  DropdownToggle,
  DropdownItem,
  DropdownSeparator,
  DropdownPosition,
  DropdownDirection,
  KebabToggle
} from '@patternfly/react-core';
import { ThIcon } from '@patternfly/react-icons';

class PositionRightDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
    this.onToggle = isOpen => {
      this.setState({
        isOpen
      });
    };
    this.onSelect = event => {
      this.setState({
        isOpen: !this.state.isOpen
      });
      this.onFocus();
    };
    this.onFocus = () => {
      const element = document.getElementById('toggle-id-5');
      element.focus();
    };
  }

  render() {
    const { isOpen } = this.state;
    const dropdownItems = [
      <DropdownItem key="test" component="button" onClick={() => console.info('First link pressed')}>Link</DropdownItem>
    ];
    return (
      <Dropdown
        onSelect={this.onSelect}
        position={DropdownPosition.right}
        toggle={<DropdownToggle onToggle={this.onToggle}>Dropdown</DropdownToggle>}
        isOpen={isOpen}
        dropdownItems={dropdownItems}
      />
    );
  }
}

[rachael-phillips]

Hi @KKoukiou we’ve seen this and will follow up soon with a response.

[KKoukiou]

@tlabaj please reopen and as discussed in the previous cockpit/PF4 migration meeting please make sure that the bot does not close actual bugs without human approval.