flatpickrでカレンダーのtoggleの挙動がおかしく、クリックするたびに一瞬閉じて再描画されてしまう

実現したいこと

ご覧いただき、誠にありがとうございます。

flatpickrでカレンダーのtoggleの挙動がおかしく、クリックするたびに一瞬閉じて
再描画されてしまうといった現象にあっており、本来のtoggleの動きになるように
制御について困っております。
ぜひともご教示いただきたくよろしくお願いいたします。

Bootstrap5＋flatpickrを併用したシンプルなフォームを作りました。
私のプライベート用パソコンで、即興で作ったフォームです。

実現したいことは、

1. 1回目のクリック　→　カレンダーを開く
2. 2回目のクリック　→　カレンダーを閉じる
3. 3回目のクリック　→　カレンダーを開く・・・
4. クリックするたびに「開く ⇔ 閉じる」

といったtoggle本来の動きを狙っていました。

発生している問題・分からないこと

カレンダーはテキストボックスをクリックすると、クリックするたびに
「開く→閉じる→開く・・・」
といった効果が出ていることを確認しました。

テキストボックスの末端にカレンダーアイコンを付随させて、カレンダーアイコンを
クリックした場合のイベントを「addEventListener」で実装しました。

jQueryは一切使用していません。

具体的な現象を動画GIFで再現させてみました。

動画にも示されているように、

1. 1回目のクリック　→　カレンダーを開く
2. 2回目のクリック　→　カレンダーを一瞬閉じて再描画される
3. N回目のクリック　→　カレンダーを一瞬閉じて再描画されるの繰り返し

といった現象を止めて、本来のtoggleの動きになるように制御について困っております。

該当のソースコード

HTML

1<!-- 呼び出し側のHTML　Bootstrap5を併用しています--> 2 3<div class="input-group flex-nowrap"> 4 <input type="text" name="my_date" class="form-control" id="my_datepickr" data-input> <!-- 外部制御の主軸となるように data-inputを追加--> 5 <a class="input-group-text input-button" id="cal_icon" data-toggle> <!-- 外部制御のトグル効果が得られるように data-toggleを追加--> 6 <i class="fa-solid fa-calendar-days"></i> 7 </a> 8</div>

JavaScript

1flatpickr(".flatpickr",{wrap: true}); 2 3flatpickr("#my_datepickr", {4 locale: 'ja',5 minDate: "1990-01-01",6 maxDate: "2036-12-31",7 enableTime: false,8 dateFormat: "Y/m/d"9});10 11document.getElementById("cal_icon").addEventListener('click', function() {12 flatpickr("#my_datepickr", my_datepickr_conf).toggle(); 13}, false);14

試したこと・調べたこと

上記の詳細・結果

コチラのサイトのチュートリアルでflatpickrを組み込みました。

ー flatpickr - にほんご。　Examples
https://tr.you84815.space/flatpickr/examples.html

下記のGithubのissueでも似たような現象についての指摘が上がっていますが、すでにcloseされています。

ー data-toggle/toggle() doesn't work #205
https://github.com/ankurk91/vue-flatpickr-component/issues/205

補足

• 使用OS:　Windows10
• エディタ：VSCode
• サーバー：VSCodeのGO Live Server
• Bootstrap 5 (CDNで読み込み)
• Flatpickr　（CDNで読み込み）