Material-UIでonClickイベントが動作しない

Question

現在、新しいタブ(newtab)を拡張するChrome拡張機能を作成しています。

メニュー画面にソート可能なメニューバーにMaterial-UIを適用してクリックイベントを追加したところ、動作せず困っております。

抜粋...
return (
        <Button className="flex-element-evdbook" onClick={() => { console.log("yyyyy") }}>アイテム１</Button>
    )

ソートには react-sortable-hoc コンポーネントを使用し、どうやら Material-UIとの組み合わせがクリックが動作しない原因のようなのですが、解決方法がわかりません。 皆様のお力をお借りしたく質問させていただきました。気になる点など些細な情報でも構いませので回答のほうにお寄せいただければと思います。

以下にソースコードを記載します。情報不足などありましたら、適宜追加していきますのでよろしくお願いいたします。

class NewTab extends React.Component {

...

   render() {
        return (
            <div className='App'>
                <Container
                    guidOrder= {this.state.guidOrder}
                    axis="x"
                    onSortEnd={this.OnSortEnd}
                />
            ...
}

const Container = SortableContainer(({guidOrder}) => {
        return (
            <div className="flex">
                {guidOrder.map((guid, index) => (
                    <Element key={guid} index={index} guid={guid} />
                ))}
            </div>
        )
});

const Element = SortableElement(({guid}) => {
    return (
        <Button className="flex-element-evdbook"
          onClick={() => { console.log("yyyyy") }}
        >
            SampleElement
        </Button>
    )
});

Answer 1

原因はイベントの衝突にあったようです。
この場合、クリックの動作がソートとクリック（イベント処理）の２つ設定されていたため、片方のイベントが無視されていました。

ソートのイベントに遅延処理をかけることで両方の動作を満たすことができましたので解決とさせていただきます。

以下ソースコード

<Container
    guidOrder= {this.state.guidOrder}
    axis="x"
    pressDelay="200" //　遅延処理を追加
    onSortEnd={this.onSortEnd}
/>

Comments

[TosuTosu]

誤り
☓ pressDelay="200"
↓
○ pressDelay={200}