sproutcore/sproutcore — Issue #637: SC.TextFieldView does not loose focus when a modal pane opens.
Author: workmanw
Created: 2011-12-09 19:19:18+00:00
State: open
Labels: 1.x, desktop

If an SC.TextFieldView has focus and a modal pane opens as a result of hitting 'enter' on the keyboard that text field does not loose focus. To clarify, you need a button in your view that has 'isDefault' set to YES.

This causes a whole skew of issues. The first of which is that user can continue to type in a "background" text field despite the fact that a modal dialog is open on top of it. The second issues is that because SC knows that the text field should not be receiving events, 'keyDown' and 'keyUp' are not invoked even though the value in the text field is still changing. In turn this causes the value to become out of sync with the view element. To make matters even worse if you close the modal dialog by hitting enter and continue typing your value is still out of sync because the text field never lost focus it hasn't had a chance to receive a 'focus' event to fix it's state and resync the value.

Still with me? I apologize if the explanation was tough to follow. I've prepared a code sample and a few basic steps to help illustrate the problem.

Here's a MainPane, you can use it in the console of an existing app or drop it into a new project.

```javascript
var myMainPane = SC.MainPane.design({
childViews: 'view'.w(),

value: "",

view: SC.View.design({
layout: { centerX: 0, bottom: 40, width: 300, height: 60 },
childViews: 'textField labelView button'.w(),

textField: SC.TextFieldView.design({
layout: { left: 0, width: 200, height: 25 },
valueBinding: '.parentView.parentView.value'
}),

labelView: SC.LabelView.design({
layout: { left: 0, top: 30 },
valueBinding: '.parentView.parentView.value'
}),

button: SC.ButtonView.design({
layout: { left: 220, width: 80, height: 25 },
title: "Click me",
isDefault: YES,
action: 'openAlert'
})
}),

openAlert: function() {
var textFieldValue = this.get('value');

SC.AlertPane.error({
message: "The current value is: '" + textFieldValue + "'.",
description: "Do not close the alert pane. Please continue typing and notice that the binding is not updated.\n\nPlease close the alert pane by pressing 'enter' and continue typing, notice the binding is *still* not being updated. "
})
}
});
myMainPane.create().append();
```

NOTE: Do not change the focus of your browser window while preforming steps 1-5. Changing focus could cause things to work properly.

1. Click in the text field and begin typing. (**Notice the label below the text field is updating in sync with the text field**)
2. Hit 'enter' on the keyboard and a modal alert pane should open.
3. Continue typing while the modal pane is open. (**Notice you can type in the field and the label binding is no longer in sync**)
4. Hit 'enter' on the keyboard to close the dialog.
5. Now that the dialog is closed, continue typing. (**Notice that the label binding is still not in sync**)