Prevents event bubbling in child elements of SelectableGroup

[monsterooo]

Hi, @valerybugakov

I tried to prevent bubbling of child elements in the program.

import React from 'react'
import { createSelectable } from '../src'
import Label from './Label'

// No one method works
function onMousedown(e) {
  e.stopPropagation()
  e.preventDefault()
  e.nativeEvent.stopPropagation()
  e.nativeEvent.preventDefault()
  e.nativeEvent.stopImmediatePropagation()
}
const Album = ({
  selectableRef, selected, selecting, title, year,
}) => (
  <div
    ref={selectableRef}
    className={`
      ${(year === 10 || year === 27) && 'not-selectable'}
      item
      ${selecting && 'selecting'}
      ${selected && 'selected'}
    `}
    onMouseDown={onMousedown}
  >
    <div className="tick">+</div>
    <h2>{title}</h2>
    <small>{year}</small>
    <Label selected={selected} selecting={selecting} />
  </div>
)

export default createSelectable(Album)

I looked at the source code

SelectableGroup Event bind

I made the following attempt

// src/SelectableGroup.js
render() {
    return (
      <SelectableGroupContext.Provider value={this.contextValue}>
        <this.props.component
          ref={this.getGroupRef}
          onMouseDown={this.mouseDown}  {/** It works fine **/}
          style={Object.assign({}, this.defaultContainerStyle, this.props.style)}
          className={`${this.props.className} ${
            this.state.selectionMode ? this.props.selectionModeClass : ''
          }`}
        >
          <Selectbox
            ref={this.getSelectboxRef}
            fixedPosition={this.props.fixedPosition}
            className={this.props.selectboxClassName}
          />
          {this.props.children}
        </this.props.component>
      </SelectableGroupContext.Provider>
    )
  }

Do you think you can make some minor adjustments?

Thank you :)