簡単にチャットウィンドウを作成できる「BotUI」というOSSのライブラリを触ってみています。
今回は、ドロップダウンリスト（botui.action.select）を使う場合に、どのようにすればよいか試してみます（少しハマりました）。

前提条件

BotUIが動作可能なセッティングが完了しているものとします。
まだ何もしていなくてこれからという方は、こちらの記事をどうぞ
BotUI のバージョンは、0.3.4。

やってみる

公式ドキュメントとおりにやってみる

BotUIのドキュメントページによると下記コードでドロップダウンリストが表示されるとのこと。
（※ドキュメントページのコードにはタイポがあり、searchselect : trueの直後に","が必要。下記コードでは修正済み。）

コード

var botui = new BotUI('sample');

botui.action.select({
  action: {
      placeholder : "Select Language", 
      value: 'TR', // Selected value or selected object. Example: {value: "TR", text : "Türkçe" }
      searchselect : true, // Default: true, false for standart dropdown
      label : 'text', // dropdown label variable
      options : [
                      {value: "EN", text : "English" },
                      {value: "ES", text : "Español" },
                      {value: "TR", text : "Türkçe" },
                      {value: "DE", text : "Deutsch" },
                      {value: "FR", text : "Français" },
                      {value: "IT", text : "Italiano" },
                ],
      button: {
        icon: 'check',
        label: 'OK'
      }
    }
}).then(function (res) { // will be called when a button is clicked.
  console.log(res.value); // will print "one" from 'value'
});

結果

でない！！下図のように表示される。
f:id:tacoyaky:20180705221046p:plain

なぜか？

理由1

CDNではaction.selectが利用可能なコードは配信されていない。（2018/7/5時点）
→対策：githubで公開されている最新コードをダウンロードしてきて利用する必要がある。

理由2

前述の表示結果を見ると、「OK」ボタンの左側に何やら下線部分がありここが怪しい。
描画がうまくいっていないかもなのでgithubからダウンロードしてきたファイルのbotui.htmlやCSSファイルを見てみるも特に問題なさそうな気がする。。。
試しに表示までに少しだけ待機処理を入れてみると・・・ドロップダウンリスト表示されました。単に描画が間に合っていなかっただけらしい。
→対策：下記のように元のコードにdelay処理を入れた（★部分）。

var botui = new BotUI('sample');

botui.action.select({
  action: {
      placeholder : "Select Language", 
      value: 'TR', // Selected value or selected object. Example: {value: "TR", text : "Türkçe" }
      searchselect : true, // Default: true, false for standart dropdown
      label : 'text', // dropdown label variable
      options : [
                      {value: "EN", text : "English" },
                      {value: "ES", text : "Español" },
                      {value: "TR", text : "Türkçe" },
                      {value: "DE", text : "Deutsch" },
                      {value: "FR", text : "Français" },
                      {value: "IT", text : "Italiano" },
                ],
      button: {
        icon: 'check',
        label: 'OK'
      }
    },    // ★","を追加
    delay: 10    // ★10msecのdelay処理を追加
}).then(function (res) { // will be called when a button is clicked.
  console.log(res.value); // will print "one" from 'value'
});