首次选择时的DevExtreme DropDownBox问题已更改

Question

我一直在学习使用DevExteme HTML 5小部件。我遵循了代码示例here，但数据来自远程API。

代码是：

let containerForRemoteObjectDropDown = document.createElement("div");

var dropOptions4 = {
  value: 10409,
  valueExpr: "orderId",
  valueExpr: "shipCountry",
  dataSource: {
    store: AspNetData.createStore({
      loadUrl: "https://localhost:44341/nwind/orders",
      key: "orderId"
    }),
    sort: "shipCountry",
    paginate: true,
    pageSize: 100 // group
  },
  contentTemplate: function(e) {
    let divForGrid = document.createElement("div");
    var grid = new DataGrid(divForGrid, {
      dataSource: e.component.option("dataSource"),
      columns: ["orderId", "shipCountry"],
      height: 265,
      selection: { mode: "single" },
      selectedRowKeys: [selectedValue],
      onSelectionChanged: function(selectedItems) {
        var keys = selectedItems.selectedRowKeys,
          hasSelection = keys.length;
        e.component.option("value", hasSelection ? keys[0] : null);
        e.component.close();
      }
    });
    return divForGrid;
  }
};

container.appendChild(containerForRemoteObjectDropDown);

let remoteDatadropDownInstance = new DropDownBox(
  containerForRemoteObjectDropDown,
  dropOptions4
);

问题是，当您第一次单击DropDownBox时，将触发onSelectionChanged事件，并且窗口小部件的下拉部分关闭。这是在您实际选择最喜欢的项目时发生的，而不是在单击小部件以首先调用控件的下拉部分时发生的。

以下是它的动画gif：

有人知道我在做什么错吗？

Answer 1

集成下拉菜单时，我遇到相同阶段的问题。与此代码相同 https://js.devexpress.com/Demos/WidgetsGallery/Demo/DropDownBox/SingleSelection/jQuery/Light/

此阶段，数据通过api调用而不是静态js文件进行绑定。 然后，我在下面做了一些更改。

Answer 2

此阶段是从api调用而非静态js文件绑定数据时。然后，我在下面做了一些更改。