Adding onClick event on the triggerButton of the Dropdown is breaking the behavior of it

[mnajdova]

Bug Report

Steps

Add toggleButton prop on the Dropdown with custom onClick event.

Expected Result

The toggleButton should still open the Dropdown when clicked, and should invoke the user's onClick event

Actual Result

Clicking on the trigger button is not opening the Dropdown, and the user's onClick handler is never invoked.

Version

0.30.0

Proposed solution

when creating the toggleButton, the events should be written in the overrideProps section. There we can invoke the Downshift's handlers, and then the user's specified handlers.

  private renderTriggerButton(
    styles: ComponentSlotStylesInput,
    rtl: boolean,
    getToggleButtonProps: (options?: GetToggleButtonPropsOptions) => any,
  ): JSX.Element {
    const { triggerButton } = this.props
    const content = this.getSelectedItemAsString(this.state.value)

    const toggleButtonProps = getToggleButtonProps({
        onFocus: this.handleTriggerButtonOrListFocus,
        onBlur: this.handleTriggerButtonBlur,
        onKeyDown: e => {
          this.handleTriggerButtonKeyDown(e, rtl)
        },
        'aria-label': content,
      })

    const { onClick, onFocus, onBlur, onKeyDown, ...restToggleButtonProps } = toggleButtonProps

    return (
      <Ref innerRef={this.buttonRef}>
        {Button.create(triggerButton, {
          defaultProps: {
            className: Dropdown.slotClassNames.triggerButton,
            content,
            fluid: true,
            styles: styles.triggerButton,
            ...restToggleButtonProps,
          },
          overrideProps: (predefinedProps: IconProps) => ({
            onClick: e => {
              onClick(e)
              _.invoke(predefinedProps, 'onClick', e, predefinedProps)
            },
            onFocus: e => {
              onFocus(e)
              _.invoke(predefinedProps, 'onFocus', e, predefinedProps)
            },
            onBlur: e => {
              onBlur(e)
              _.invoke(predefinedProps, 'onBlur', e, predefinedProps)
            },
            onKeyDown: e => {
              onKeyDown(e)
              _.invoke(predefinedProps, 'onKeyDown', e, predefinedProps)
            },
          }),
        })}
      </Ref>
    )
  }

Testcase

https://codesandbox.io/s/10k3m855j