We had a similar problem at work. what we figured out in the end was that the mousedown event will fire before the blur event allowing you to set the content before the validation or even cancel the validation process completely using a flag. check this fiddle I made using your example- http://jsfiddle.net/dL3K3/31/ $(function(){ var … Read more
In order to have the input value editable you need to have an onChange handler for it that updates the value. and since you want to call a function onBlur, you have to bind that like onBlur={() => this.props.actions.updateInput()} componentDidMount() { this.setState({inputValue: this.props.inputValue}); } handleChange = (e) => { this.setState({inputValue: e.target.value}); } <input value={this.state.inputValue} onChange={this.handlechange} … Read more
Immediately inside setInterval, place a check to see if the document is focused. The interval will continue firing as usual, but the code inside will only execute if the document is focused. If the window is blurred and later refocused, the interval will have continued keeping time but document.hasFocus() was false during that time, so … Read more
The trick is to wait an extra tick: $(el).blur(function (event) { // If we just hangout an extra tick, we’ll find out which element got focus really setTimeout(function(){ document.activeElement; // This is the element that has focus },1); })
There are a few problems here. 1: onBlur expects a callback, and you are calling renderPasswordConfirmError and using the return value, which is null. 2: you need a place to render the error. 3: you need a flag to track “and I validating”, which you would set to true on blur. You can set this … Read more
I faced the same issue. This what worked for me. handleBlur(event) { // if the blur was because of outside focus // currentTarget is the parent element, relatedTarget is the clicked element if (!event.currentTarget.contains(event.relatedTarget)) { ….. } } Enjoy 🙂
Short answer: add tabindex=”0″ attribute to an element that should appear in event.relatedTarget. Explanation: event.relatedTarget contains an element that gained focus. And the problem is that your specific div can’t gain a focus because browser thinks that this element is not a button/field or some kind of a control element. Here are the elements that … Read more
Solution 1 Listen to mousedown instead of click. The mousedown and blur events occur one after another when you press the mouse button, but click only occurs when you release it. Solution 2 You can preventDefault() in mousedown to block the dropdown from stealing focus. The slight advantage is that the value will be selected … Read more
Use (eventName) while binding event to DOM, basically () is used for event binding. Also, use ngModel to get two-way binding for myModel variable. Markup <input type=”text” [(ngModel)]=”myModel” (blur)=”onBlurMethod()”> Code export class AppComponent { myModel: any; constructor(){ this.myModel=”123″; } onBlurMethod(){ alert(this.myModel) } } Demo Alternative 1 <input type=”text” [ngModel]=”myModel” (ngModelChange)=”myModel=$event”> Alternative 2 (not preferable) <input … Read more
I was having the exact same issue as you, my UI is designed exactly as you describe. I solved the problem by simply replacing the onClick for the menu items with an onMouseDown. I did nothing else; no onMouseUp, no flags. This resolved the problem by letting the browser automatically re-order based on the priority … Read more