PF4 Dropdown: No button type submits page when selected

[dlabrecq]

Looking at the generated code by the PF4 Dropdown, it creates a button without any specified type, which (by default) attempts to submit the page/form. This causes the page to refresh and we end up with a blank page due to a submit error.

PF4 Dropdown output:

The workaround I'm forced to implement prevents the onClick event from propagating any higher.

Dropdown usage:

<Dropdown
  onClick={event => event.preventDefault()} <<< WORKAROUND
  onSelect={this.handleGroupBySelect}
  toggle={
    <DropdownToggle onToggle={this.handleGroupByToggle}>
      {t(`group_by.values.${groupById}`)}
   </DropdownToggle>
  }
  isOpen={isGroupByOpen}
  dropdownItems={groupByOptions.map(option => (
    <DropdownItem
      key={option.value}
      onClick={event =>
        this.handleGroupByItemClick(event, option.value)
      }
    >
      {t(`group_by.values.${option.label}`)}
    </DropdownItem>
  ))}
/>

[kmcfaul]

#1148 should have set a type property on the toggle button, defaulting to 'button' when nothing is passed in. Are you still experiencing the issue?

[dlabrecq]

I installed the latest react-core v1.48.0, and see the type="button", but the page is still being submitted.

[kmcfaul]

Can you try defining component='button' in your DropdownItem mapping? I'm looking at the code and by default it wraps items in an anchor tag, which is possibly the reason for the submission.

[dlabrecq]

I don't see an anchor tag in the output, but adding component='button' seems to resolve the issue.