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

実現したいこと

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

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

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

実現したいことは、

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

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

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

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

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

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

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

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

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

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

該当のソースコード

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

JavaScript
1//flatpickr(".flatpickr",{wrap: true});      //　←　2024/04/17　間違いでした
2
3//flatpickr("#my_datepickr", {      //　←　2024/04/17　間違いでした
4flatpickr(".flatpickr", {
5            locale: 'ja',
6            minDate: "1990-01-01",
7            maxDate: "2036-12-31",
8            enableTime: false,
9            dateFormat: "Y/m/d",
10            wrap: true                         //　←　2024/04/17　抜けてました。
11                                                    //         wrapはセレクタがクラスじゃないとエラーになります。
12});
13
14document.getElementById("cal_icon").addEventListener('click', function() {
15     //flatpickr("#my_datepickr", my_datepickr_conf).toggle();//　←　2024/04/17　間違いでした
16    flatpickr(".flatpickr", {
17            locale: 'ja',
18            minDate: "1990-01-01",
19            maxDate: "2036-12-31",
20            enableTime: false,
21            dateFormat: "Y/m/d",
22            wrap: true
23     }).toggle();
24}, false);
25

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

コチラのサイトのチュートリアルで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で読み込み）

Lhankor_Mhy

2024/04/17 00:41

ご提示のコードを試してみましたが、普通にカレンダーが開きました。ですので、問題が再現しませんでした。おそらく、ここに書かれていない部分のコードに原因があると思います。問題が再現するコードをご提示ください。 https://teratail.com/help/question-tips#questionTips35 現象を見る限り、addEventListener が複数回実行されているのではないかな、という想像をしています。

Lhankor_Mhy

2024/04/17 02:38

すみません、質問を読み間違っていました。

Lhankor_Mhy

2024/04/17 02:57

ひとまず、サンプルの通りにしたところ動作しましたが、そうではなくて、toggleメソッドを使うのが必須条件ですか？ https://flatpickr.js.org/examples/#flatpickr--external-elements

milton_rb4life

2024/04/17 12:09

ご回答ありがとうございます。ご推察の通り、トグルは必須条件としていました。業務でまさにこの現象（トグルになっていない挙動）に遭遇して、まさかと思って家でゼロから今回のようなジャンクページをゼロから作って試したら再現した次第です。上記で示したHTMLでは、テキストボックスの親に「flatpickr」クラスが抜けていたので追加しましたが、状況は変わらずでした。