Is there a way to display calendar on input focus?

[Yuripetusko]

Is there a way to display calendar on input focus? Maybe some exposed methods?

[01taylop]

I have a hacky solution to this issue. Its almost 2am here so rigorous testing can wait until morning.

Basically, you can use the inputProps on DateTimeField to make use of onFocus. Whenever the input gets focus, this function will be called. I am sure it can be tidied up/simplified, but at the moment I get the parentElement of e.target and click on the first span in its children. Hopefully that makes sense, here is the code:

_handleBlur: function() {
  console.log('The input was blurred');
},
_handleFocus: function(e) {
  var parent = e.target.parentElement;
  var children = parent.childNodes;
  for (var i = 0; i < children.length; i++) {
    if (children[i].tagName.toLowerCase() === 'span') {
      children[i].click();
      return;
    }
  }
},

render: function() {

  var inputProps = {
    placeholder: 'DD/MM/YYYY',
    onBlur: e => this._handleBlur(e),
    onFocus: e => this._handleFocus(e)
  };

  return (
    <DateTimeField inputProps={inputProps} />
  );
}

[kadishmal]

A shorter version:

_handleFocus: function(e) {
  e.target.nextSibling.click();
},

The onBlur is not necessary, because the underlying component already handles this event and hides the calendar.

[martinbkure]

This issue could be closed now. Both solutions work smoothly. You should create a merge request with this feature.