Group Focusのtoggle制御について

↑こちらの動画のようにドロップダウンメニューを手作りしていますが、実際は、動画のようにはならず、テキストフィールド部分(実際はGroupで作成)をクリックするとドロップダウンメニューが開いて、開いたメニューを閉じようと、テキストフィールド部分をクリックするとメニューが開いたままになります。
おそらく、テキストフィールド部分はGroup Focusの外になるために、クリックした瞬間にGroup Focusが消え、消えた状態にtoggleが反応し、表示される、という事が高速で行われ、ずっと表示されているように見えているのだと思います。

この状況は、Forumにもbugとして下記のように報告されている事象のようですが、一方で、上記のyoutubeでは、きれいにtoggleになります。

どうやれば、youtubeのようにきれいにtoggleできるのか、教えて頂けないでしょうか?

回答者
こんばんは!YouTube も見ましたが、toggle だけであんな動きはしないですね。私の見解も quonji さんと同様です。
それでどうするか?なのですが、弊社の Bubble Camp でお伝えしている方法は次の2つです。
(1) Group Focus を表示している時に x ボタンの Clickable を外してしまう
(2) Group Focus を表示している時にだけアイコンを入れ替えて x ボタンを表示してしまう。x ボタンを押されたら Group Focus を非表示にする。
(toggle ではなく hide で消している)
こんな感じで作るとスムーズに動作すると思います。サンプルをおいておくので、こちらもご参考まで。
プレビュー

エディター

質問者
ありがとうございます!
toggle だけであんな動きはしないですね。
↑私がおかしいのかと思ったのですが、そう言って頂けてよかったです。
回避方法についても承知しました。ありがとうございます!

参考URL