I cannot select a manual color through the input

[Philippe]

I use the Kendo UI Web v2014.1.318.
I try with Firefox and Google Chrome.

I cannot select a manual color through the input.

When I open the color picker, the focus is done to an input before the color picker.
When I click in the color input, I cannot get the focus to enter the color.

01.<div class="silx-setting-settings-dialog ui-dialog-content ui-widget-content" id="ui-id-5" style="width: auto; min-height: 50px; max-height: none; height: auto;">
02.    <div class="silx-row">
03.      <label>!! Action label:</label>
04.      <input type="text" class="silx-setting input settingLabel" value="Systematic Rejection">
05.    </div>
06.
07.    <script type="text/javascript">
08.
09.        var as_Color = "#cccccc";
10.
11.
12.      $(".settingBackgroundColor").kendoColorPicker({
13.        value: as_Color,
14.        buttons: false,
15.        change: function(e) {
16.           $(".previewSettingImage").css("backgroundColor", e.value);
17.        },
18.        select: function(e) {
19.           $(".previewSettingImage").css("backgroundColor", e.value);
20.        }
21.      });
22.    </script>
23.    <div class="silx-row">
24.      <label>!! Background color:</label>
25.      <span role="textbox" aria-haspopup="true" class="k-widget k-colorpicker k-header" aria-disabled="false" tabindex="0" aria-label="Current selected color is #cccccc" aria-owns="6fb0d2e4-e256-4d54-9bb3-853eb40cdec6"><span class="k-picker-wrap k-state-default"><span class="k-selected-color" style="background-color: rgb(204, 204, 204);"></span><span class="k-select" unselectable="on"><span class="k-icon k-i-arrow-s" unselectable="on"></span></span></span><input class="silx-setting input settingBackgroundColor" data-role="colorpicker" style="display: none;"></span>
26.    </div>
27.
28.    <script type="text/javascript">
29.      $(".settingImage").kendoComboBox({
30.        dataTextField: "text",
31.        dataValueField: "value",
32.  template: '<span class="k-state-default"><img width="26" height="26" src="/Root/Global/plugins/silx-extendable-dashboard/img/silcActions/#:data.text#" alt="#:data.text#" /></span>',
33.        dataSource:
34.        [
35.          { text: "Systematic Rejection.png", value: "Systematic Rejection.png" },
36.          { text: "dashboard-exit.png", value: "dashboard-exit.png" },
37.          { text: "logo-vertech.png", value: "logo-vertech.png" }
38.        ],
39.        change: function(e) {
40.          $(".previewSettingImage").css("background-image", "url(/Root/Global/plugins/silx-extendable-dashboard/img/silcActions/" + e.sender.input.val() + ")");
41.        }
42.      });
43.
44.      var ao_KendoCombo = $("input.silx-setting.settingImage:hidden").data("kendoComboBox");
45.      ao_KendoCombo.value("Systematic Rejection.png");
46.
47.      $(".addImageFile").kendoButton(
48.        {
49.          click: function(e) {
50.            UploadImageFile(e);
51.          }
52.        }
53.      );
54.    </script>
55.    <div class="silx-row">
56.      <label>!! Image:</label>
57.      <span class="k-widget k-combobox k-header silx-setting input settingImage" style=""><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input class="k-input silx-setting input settingImage" type="text" autocomplete="off" maxlength="524288" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="" aria-busy="false" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1">select</span></span></span><input class="silx-setting input settingImage" data-role="combobox" aria-disabled="false" aria-readonly="false" style="display: none;"></span>
58.      <button type="button" class="addImageFile k-button" style="font-size:20px;line-height:20px;" data-role="button" role="button" aria-disabled="false" tabindex="0">...</button>
59.      <div class="previewSettingImage silc-action-button" style="background-color: rgb(204, 204, 204); float: right; margin-right: 175px; margin-top: 0px; background-image: url(http://192.168.1.185:8080/Root/Global/plugins/silx-extendable-dashboard/img/silcActions/dashboard-exit.png);"></div>
60.    </div>
61.
62.    <div class="silx-row">
63.      <label>!! Order:</label>
64.      <input type="text" class="silx-setting input settingOrder" value="1">
65.    </div>
66.
67.    <div class="silx-settings">
68.      <button class="silx-settings-cancel">Annuler</button>
69.      <button class="silx-settings-ok">Ok</button>
70.    </div></div>

Regards,
Michaël Gauthier

[Kiril Nikolov]

Hi Philippe,

I have tried to reproduce the issue in the following example, but to no avail:

http://jsbin.com/xemam/1/edit

Can you please edit the above example, so it can show the exact issue that you are having? Once we are able to reproduce it, we can assist you further.

Thank you in advance for your cooperation.

Regards,
Kiril Nikolov
Telerik