Values divergence when using with React.js

[ikr]

I'm having trouble making the better-dateinput-polyfill work with Facebook's React library. The control doesn't update the input's value for some reason. Also, the programmatic changes to the DOM element's "value" attribute aren't reflected in the date picker widget.

You can see yourself here

Any ideas how to deal with it?

The non-minified source code is here.

[chemerisuk]

Hi @ikr, you need to use better-dom wrapper object interfaces to set the value.

On your page try the code below:

DOM.find("input").set("2010-09-20");

I suggest to find elements by name (because type property is updated by the polyfill) and cache them somewhere e.g.

var startInput = DOM.find("[name=start]"),
    endInput = DOM.find("[name=end]");

...

startInput.set("2014-09-20");
endInput.set("2014-09-28");

[ikr]

@chemerisuk

Thanks! DOM.find('.period-of-stay-check-in input').set('2014-09-30'); indeed sets the widget value! That solves the problem of programmatic value updates. How about the other way around? How do I propagate the widget changes to the DOM? Now, when I operate the widget manually, or even when I set the widget value, as you suggested, the DOM input value stays unchanged.

[chemerisuk]

@ikr

Now, when I operate the widget, or even when I set the widget value as you suggested, the DOM input value stays unchanged.

Not sure you you mean. The polyfill triggers change event when you update a value using the date picker or after the set call. So you can just listen to this event to update anything else.

As per value of the input itself, the value should be updated when you call method set.

Let me know if you have a questing still. I guess I didn't fully understand your use case.

[ikr]

@chemerisuk

Try changing a date value at http://ikr.su/h/react-period-of-stay-input/demo.html , and then inspect the corresponding input element with Firebug. The value in the DOM has not changed. Somehow, the polyfill magic seem to be at odds with the React magic :)

[ikr]

@chemerisuk

Can I

DOM.find('.period-of-stay-check-in input').change(function () { 
  // feed the new value to React
});

?

[chemerisuk]

@ikr

Sure, you can either:

startInput.on("change", function() {
  var currentValue = startInput.get();
  // do something with it
});

or native:

element.addEventListener("change", function(e) {
  var currentValue = e.target.value;
  // do something with it
}, false);

In other words better-dom exposes native events that you can use to be notified.

[ikr]

@chemerisuk

Thank you so much! You're very helpful!

I believe I get it now: better-dateinput-polyfill assumes everything in JS is done via better-dom. I was "holding it wrong" :)

Thus, to make it work with React views (something oblivious to better-dom), I have to do the .on("change", ...) wiring. In that sense, it's arguably not a polyfill -- it's not equivalent to, say, Chrome's native implementation of <input type="date"/> -- it makes certain assumptions about how it's interacted with.

[chemerisuk]

@ikr yes, you are right, the polyfill does not synchronise the value attribute yet. But I'm not saying it's not possible to do :) I just didn't have such feature request.

It's cool to make a perfect polyfill you described. But for instance in that case we have to use Shadow Dom, because currently the polyfill adds date picker div to the document. And Shadow Dom is not supported everywhere. Therefore it's sad but true that we can't have a perfect polyfill at present...

[ikr]

@chemerisuk Got it. Thx!

[chemerisuk]

@ikr how your code looks like? I want to investigate the usefulness of feature, that allows to watch for the value attribute changes on a more low level.

[chemerisuk]

@ikr sorry for being annoying but I really need your feedback on that.

[ikr]

@chemerisuk Sorry, had a vacation :) I've published the solution to my problem as a StackOverflow answer. All the code is on GitHub. You may be particularly interested in commit 8f199449841635526428cba58498a0f989584f43, before the switch to jQuery UI.

[chemerisuk]

Thanks for the response @ikr. The feature mentioned in the ticket in my schedule for the next version.