Semantic-UI dropdowns broken with ViewModel 6.1.1 and 6.1.2

[arggh]

Reproduction: https://github.com/arggh/viewmodel-input-events-issue

In Semantic-UI docs (http://semantic-ui.com/modules/dropdown.html#/usage) the usage of a dropdown example goes like this:

HTML

<div class="ui dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="male">Male</div>
    <div class="item" data-value="female">Female</div>
  </div>
</div>

Javascript

$('.ui.dropdown')
  .dropdown()
;

This used to work with ViewModel at least until 6.0.0, but in 6.1.2 it no longer works. The value does not get updated, when binding to the hidden input element inside the dropdown.

[ManuelDeLeon]

Thx for testing this. Pick up 6.1.3

[arggh]

Glad to help, but ... maybe the approach of not reacting to change events on inputs is a bad move.

I tried 6.1.3, and while it fixed the Semantic-UI test case, it essentially prevents many third party libraries (date pickers? color pickers? what else?) from working properly with ViewModel. They can be wired to function with ViewModel, given that they provide the necessary callbacks, but for example the basic Pickadate-implementation (below) no longer works with ViewModel.

Template:

<label>My date</label>
<input {{b "ref: datePicker, value: myDate"}} type="text">

JS

Template.test.viewmodel({
   myDate: '',
   onRendered() {
      this.datePicker.pickadate();
   }
});

[ManuelDeLeon]

I think we can have our cake and eat it too. I'll work on it...

[fvpDev]

This is also happening with ViewModel-React

[ManuelDeLeon]

@arggh

I'm pretty sure it's working as expected in 6.1.4 (all tests pass) As I said before you can still shoot yourself in the foot. In your example if you set the delay to say 1sec, you can type and quickly click the clear button, and it will clear the text, then in 1 sec the text will appear again. That behavior is normal and expected.

@fvpDev

I'll check the dropdowns with the React version, although I'm surprised it doesn't. I need to apply this and #262 fix to the React version though.

[arggh]

@ManuelDeLeon I get this thrown when I type into an input with throttled value binding:

viewmodel-parseBind.coffee:17 Uncaught TypeError: Cannot set property 'nextVal' of undefinedvalueEvent @ viewmodel-parseBind.coffee:17(anonymous function) @ manuel_viewmodel.js?hash=49c6756…:608dispatch @ jquery.js:5201elemData.handle @ jquery.js:5009

My component in this case is super simple, so I'm pretty confident it's not something awkward in my implementation.

<template name="search">
  <div class="ui massive left icon transparent input">
    <input {{b "value: search, throttle: 500"}} type="text" class="short">
  </div>
</template>

[ManuelDeLeon]

Make a repro. I can't reproduce it.

[arggh]

Sure thing, here goes: https://github.com/arggh/vm-throttle-input2

I already found the culprit: I was using a value from a VM-share in the input binding.

[arggh]

@ManuelDeLeon Any comment on the repro? It should work even if the binding is done directly to a property of a VM-share, right?

[ManuelDeLeon]

@bryantbiggs

Dunno, could have been a bad deploy which used a bad semantic or jquery version. Here's what I see: