Draggable doesn't allow text fields to be blurred

[ccocks]

Draggable doesn't allow text fields to be focused: https://codepen.io/BlazgoCompany/pen/oNrBJOm To focus the textbox, you have to click the textbox multiple times. To unfocus, you have to either:

1. Click the draggable container multiple times, or,
2. Click outside the draggable container once.

There is a text cursor on hover, and minimumMovement is 100 so there is no problem with that either.

[ccocks]

@jackdoyle Is there a way to fix this

[jackdoyle]

I’m not at my computer at the moment, but have you tried adding:

dragClickables: false

[ccocks]

Thank you, dragClickables: true works However, I still have to click on .container multiple times in order to blur the box

[ccocks]

@jackdoyle, Any updates on this?

[lovepreet-singh123]

Draggable.create(".container", { dragClickables: false, onClick: function(event){ if(event.target.id !== "dur") { document.querySelector("#dur").blur() } } })

You can use this

[jackdoyle]

Actually, here's a more generic solution that doesn't depend on specific IDs:

onClick(e) {
  let lastTarget = this.releaseTarget,
      newTarget = e.target;
  lastTarget && lastTarget !== newTarget && lastTarget.blur && lastTarget.blur();
  this.releaseTarget = newTarget;
}