Tooltip on textbox, keypress event not working

[Bert]

Hello,

when i add a tooltip to a textbox it does not fire the keypress event. 

<div id="example">

    <input class="k-textbox"

                  title="Hello!"

                  data-role="tooltip"

                  data-auto-hide="false"

                  data-position="top"

                  data-bind="events: { show: onShow, hide: onHide, keypress: onKeypress }"/>

 

    <div class="box-col console-section">

        <h4>Console</h4>

        <div class="console"/>

    </div>

</div>

<script>

    var viewModel = kendo.observable({

        onShow: function() {

            kendoConsole.log("event :: show");

        },

        onHide: function() {

            kendoConsole.log("event :: hide");

        },

        onKeypress: function() {

            kendoConsole.log("event :: key press");

        }

    });

    kendo.bind($("#example"), viewModel);

</script>

 

After removing the tooltip, the keypress event is working as expected.

removed lines:

data-role="tooltip"
data-auto-hide="false"
data-position="top"

 Dojo Example that demonstrates this problem: http://dojo.telerik.com/AhigA

Could you be so kind to help us with this issue.

Kind Regards,

Bert

 

 

 

 

[Rosen]

Hello Bert,

The keypress event will not work as the Tooltip widget does not have such event. When you set a widget role to given element, it will be bound with the appropriate widget binding. Thus, in this case the events to which you can bind are those which are applicable for the widget.

If you want to use the input DOM events, you will need to remove the widget from the element. In the case with the Tooltip you could set the widget at the container element and target the input elements within this container.

Similar to the following:

<div data-role="tooltip"
        data-filter="input"
        data-auto-hide="false"
        data-position="top"
        data-bind="events: { show: onShow, hide: onHide }">
  <input class="k-textbox"
        title="Hello!"
        data-bind="events: {  keypress: onKeypress }"/>
</div>

 

Regards,
Rosen
Telerik

 

 

[Bert]

Hello,

it tried this solution and it is working as expected. Thank you for your clear answer. 

Kind regards,

Bert