Bug Tracker

#8890 closed bug (invalid)

Opened April 16, 2011 03:14AM UTC

Closed May 02, 2011 07:59AM UTC

Last modified March 17, 2013 08:07PM UTC

blur() is not fired on Chrome and Safari when focus is removed.

Reported by: kadishmal Owned by: kadishmal
Priority: low Milestone:
Component: event Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:
Description

I have an HMTL with the following structure:

<div class="project" id="project-6">
	<input type="text" class="name" value="asd asdfasdf" /></div>
<div class="project" id="project-7">
	<input type="text" class="name" value="asd asdfasdf" /></div>
...

The input field has two events which should fire either onFocus or onBlur:

function addProjectEvents(input, projectId)
{
	input.focus(function(){
		input.parent().addClass('active');
	})
	.blur(function(){
		input.parent().removeClass('active');
	});
}

When I focus all browser fire onFocus(), as the "active" class is added which changes the background of the parent "project" div. When the focus is moved to the next input, the current focused input should fire onBlur(), while the new focused input should fire onFocus().

The bug is in Chrome and Safari when onFocus() is fired, which adds the "active" class to the new project div, but the old project div does not remove "active" class, which means it does not fire the onBlur() event at all. I use Chrome 10.0 and Safari 5.0.4.

Attachments (0)
Change History (8)

Changed April 16, 2011 03:38AM UTC by kadishmal comment:1

I have just found an interesting solution on StackOverflow. It suggested to use live() function for input fields.

input.live('focus', function(){
	input.parent().addClass('active');
})
.live('blur', function(){
	input.parent().removeClass('active');

	if (input.val() != jQuery.data(input, 'name')){
		saveProject(projectId, input);
	}
});

So, I wonder if it is a bug or this is the normal behavior.

Changed April 16, 2011 03:51AM UTC by kadishmal comment:2

I just found out that the above solution with live() is not a solution for this case. So it's still assumed as a bug.

The thing is live() allows to bind events on any newly created elements. I do not need that as I call addProjectEvents() function every time I create an element. So, I do not need live() as I bind myself explicitly, but anyway, blur() event is not fired on Chrome and Safari.

Changed April 16, 2011 05:43AM UTC by addyosmani comment:3

owner: → kadishmal
status: new → pending

Thanks for taking the time to contribute to the jQuery project! Please provide a (complete) reduced test case on http://jsFiddle.net that reproduces the issue experienced to help us assess your ticket.

Additionally, test against the jQuery (edge) (ie 1.6 beta) version to ensure the issue still exists.

Changed April 17, 2011 10:58PM UTC by john comment:4

component: unfiled → event
milestone: 1.next
priority: undecided → low

Changed May 02, 2011 07:59AM UTC by trac-o-bot comment:5

resolution: → invalid
status: pending → closed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Changed March 17, 2013 07:14PM UTC by chrisbloom7@gmail.com comment:6

Just take a look at the demo at the bottom of http://api.jquery.com/focusout/ in Chrome. The blur count is never updated.

Changed March 17, 2013 07:36PM UTC by chrisbloom7@gmail.com comment:7

In contrast, native blur() seems to work fine in Chrome. See preview at http://help.dottoro.com/ljokdwpx.php

Changed March 17, 2013 08:07PM UTC by dmethvin comment:8

Please don't post unrelated questions on long-dead tickets.

I suppose we need to make it excruciatingly clear that blur **should not fire** in the example and of course it does not. The W3C says blur event doesn't bubble. Even the reference you linked says "The blur method has no effect on an element that is not the active element in the document" and the paragraph is NOT the active element--the inputs are.

https://github.com/jquery/api.jquery.com/issues/268

Again, please do not post questions, inquiries, comments, or questions on tickets that were closed long ago.