DevExpress/Extreme dxSelectBox

Question

I have 2 problem's with devExpress dxSelectBox.

1. After I pick an item form drop-down list input box becomes editable. It is not on page load and I don't know why.

2. Can't display a flag icon in main box, but can do it in dropdown list items This is what it looks like this:

Here is a code: javascript:

var langs = [{
    'Name': 'English',
    "ImageSrc": '/static/img/flags/United-States-icon.png',
    'value': 'en'
}, {
    'Name': '中文',
    "ImageSrc": '/static/img/flags/China-icon.png',
    'value': 'zh'
}]

$(function(){
    $("#language").dxSelectBox({
            dataSource: langs,
            displayExpr: "Name",
            valueExpr: "value",
            value: langs[0].value,
            acceptCustomValue: false,
            fieldEditEnabled: false,
            height: 'auto',
            width: '100',
            fieldTemplate: function(data, container) {
                var result = $("<div class='custom-item'><div class='lang'>" +
                    "<img src='" + data["ImageSrc"] +
                    "' /></div></div>");
                result.find(".lang").dxTextBox({ value: data['Name'] });
                container.append(result);
            },
            itemTemplate: function(data) {
                return "<div class='custom-item'>" + "<div class='lang'>" +
                     data['Name'] + "<img src='" +
                     data['ImageSrc']+ "' /></div></div>";
            },
            valueChangeEvent: function(data) {
                window.location.replace('https://www.google.com')
            }
    });
});

css:

.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
    padding-left: 7px;
    padding-right: 7px;
}

.custom-item {
    position: relative;
    min-height: 30px;
}

.custom-item .language {
    display: inline-block;
    padding-left: 10px;
    text-indent: 0;
    line-height: 30px;
    font-size: 12px;
}

/*.custom-item > img {*/
    /*left: 1px;*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*!*margin-top: -15px;*!*/
/*}*/

.custom-item .dx-texteditor-buttons-container {
    display: none;
}
.current-value {
    padding: 10px 0;
}

.current-value > span {
    font-weight: bold;
}

Answer 1

The first point:

You are using the fieldEditEnabled option that is deprecated. Use only the acceptCustomValue option instead.

The second point:

You're trying to render an image inside the .lang element. Next, you create a dxTextBox on the .lang div. So, all inner markup is replaced with dxTextBox markup. Well, you can just put your image next to the .lang div:

 var result = $("<div class='custom-item'><div class='lang'></div></div>");
 result.find(".lang").dxTextBox({ value: data['Name'] });
 result.append("<img class='selected-item-image' src='" + data["ImageSrc"] + "' />");
 container.append(result);

I've created fiddle as well.