sproutcore 1.5.0.pre.3 → 1.5.0.pre.4

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/segmented/ui.js

@@ -12,14 +12,14 @@ htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
 var pane;
 (function() {
   var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
-  
+
   pane = SC.ControlTestPane.design()
-    
-    .add("3_empty", SC.SegmentedView, { 
+
+    .add("3_empty", SC.SegmentedView, {
       items: [ '', '' , ''],
       layout: { height: 25 }
     })
-    .add("3_empty,icon", SC.SegmentedView, { 
+    .add("3_empty,icon", SC.SegmentedView, {
       items: [
       { value: "", icon: iconURL },
       { value: "", icon: iconURL },
@@ -29,12 +29,12 @@ var pane;
       itemIconKey: 'icon',
       layout: { height: 25 }
     })
-    .add("3_items,1_sel", SC.SegmentedView, { 
+    .add("3_items,1_sel", SC.SegmentedView, {
       items: "Item1 Item2 Item3".w(),
       value: "Item2",
       layout: { height: 25 }
     })
-    .add("2_items,toolTip", SC.SegmentedView, { 
+    .add("2_items,toolTip", SC.SegmentedView, {
       items: [
       { value: "title1", toolTip: "this is title1's tip" },
       { value: "title2", toolTip: "this is title2's tip" }],
@@ -43,13 +43,13 @@ var pane;
       itemToolTipKey: 'toolTip',
       layout: { height: 25 }
     })
-    .add("3_items,1_sel,disabled", SC.SegmentedView, { 
+    .add("3_items,1_sel,disabled", SC.SegmentedView, {
       items: "Item1 Item2 Item3".w(),
       value: "Item2",
       isEnabled: NO,
       layout: { height: 25 }
     })
-    .add("3_items,icon,2_sel", SC.SegmentedView, { 
+    .add("3_items,icon,2_sel", SC.SegmentedView, {
       items: [
       { value: "Item1", icon: iconURL },
       { value: "Item2", icon: iconURL },
@@ -61,7 +61,7 @@ var pane;
       allowsEmptySelection: NO,
       layout: { height: 25 }
     })
-    .add("3_items,2_sel,disabled", SC.SegmentedView, { 
+    .add("3_items,2_sel,disabled", SC.SegmentedView, {
        items: [
         { value: "Item1", icon: iconURL },
         { value: "Item2", icon: iconURL },
@@ -72,66 +72,66 @@ var pane;
         isEnabled: NO,
         value: "Item1 Item3".w(),
         layout: { height: 25 }
-    })   
-    .add("3_items,1_sel,emptySel", SC.SegmentedView, { 
+    })
+    .add("3_items,1_sel,emptySel", SC.SegmentedView, {
       items: ["Item1", "Very Long Item", "Item 3"],
         value: "Very Long Item",
         allowsEmptySelection: YES,
         layout: { height: 25 }
     })
-    .add("3_items,2_sel,emptySel", SC.SegmentedView, { 
+    .add("3_items,2_sel,emptySel", SC.SegmentedView, {
       items: ["Item1", "Very Long Item", "Item 3"],
       value: "Item1 Item3".w(),
       allowsEmptySelection: YES,
       layout: { height: 25 }
     })
-    .add("3_items,1_sel,multipleSel", SC.SegmentedView, { 
+    .add("3_items,1_sel,multipleSel", SC.SegmentedView, {
       items: "Item1 Item2 Item3".w(),
       value: "Item2",
       allowsMultipleSelection: YES,
       layout: { height: 25 }
     })
-    .add("3_items,2_sel,multipleSel", SC.SegmentedView, { 
+    .add("3_items,2_sel,multipleSel", SC.SegmentedView, {
       items: "Item1 Item2 Item3".w(),
       value: "Item1 Item3".w(),
       allowsMultipleSelection: YES,
       layout: { height: 25 }
     })
-    .add("3_items,1_sel,emptySel,multiSel", SC.SegmentedView, { 
+    .add("3_items,1_sel,emptySel,multiSel", SC.SegmentedView, {
       items: "Item1 Item2 Item3".w(),
       value: "Item2",
       allowsEmptySelection: YES,
       allowsMultipleSelection: YES,
       layout: { height: 25 }
     })
-    .add("3_items,2_sel,emptySel,multiSel", SC.SegmentedView, { 
+    .add("3_items,2_sel,emptySel,multiSel", SC.SegmentedView, {
       items: "Item1 Item2 Item3".w(),
       value: "Item1 Item3".w(),
       allowsEmptySelection: YES,
       allowsMultipleSelection: YES,
       layout: { height: 25 }
     })
-    .add("3_items,leftAligned", SC.SegmentedView, { 
+    .add("3_items,leftAligned", SC.SegmentedView, {
       items: "Item1 Item2 Item3".w(),
       align: SC.ALIGN_LEFT,
       layout: { height: 25 }
     })
-    .add("3_items,rightAligned", SC.SegmentedView, { 
+    .add("3_items,rightAligned", SC.SegmentedView, {
       items: "Item1 Item2 Item3".w(),
       align: SC.ALIGN_RIGHT,
       layout: { height: 25 }
     })
-    .add("3_items,widths", SC.SegmentedView, { 
+    .add("3_items,widths", SC.SegmentedView, {
       items: [
-      { value: "A", width: 70 },
-      { value: "B", width: 70 },
-      { value: "C", width: 70 }],
+      SC.Object.create({ value: "A", width: 70 }),
+      SC.Object.create({ value: "B", width: 70 }),
+      SC.Object.create({ value: "C", width: 70 })],
       itemTitleKey: 'value',
       itemValueKey: 'value',
       itemWidthKey: 'width',
       layout: { height: 25 }
     })
-    .add("5_items,widths,overflow", SC.SegmentedView, { 
+    .add("5_items,widths,overflow", SC.SegmentedView, {
       items: [
       { value: "A", width: 70 },
       { value: "B", width: 70 },
@@ -143,7 +143,7 @@ var pane;
       itemWidthKey: 'width',
       layout: { height: 25 }
     })
-    .add("5_items,1_sel,widths,overflow", SC.SegmentedView, { 
+    .add("5_items,1_sel,widths,overflow", SC.SegmentedView, {
       items: [
       { value: "A", width: 70 },
       { value: "B", width: 70 },
@@ -156,14 +156,14 @@ var pane;
       value: "D",
       layout: { height: 25 }
     });
-    
+
   pane.show(); // add a test to show the test pane
 
   // ..........................................................
   // TEST VIEWS
-  // 
+  //
   module('SC.SegmentedView ui', pane.standardSetup());
-  
+
   test("Check that all segmentedViews are visible", function() {
     ok(pane.view('3_empty').get('isVisibleInWindow'), '3_empty.isVisibleInWindow should be YES');
     ok(pane.view('3_empty,icon').get('isVisibleInWindow'), '3_empty,icon.isVisibleInWindow should be YES');
@@ -181,78 +181,88 @@ var pane;
     ok(pane.view('3_items,leftAligned').get('isVisibleInWindow'), '3_items,leftAligned.isVisibleInWindow should be YES');
     ok(pane.view('3_items,rightAligned').get('isVisibleInWindow'), '3_items,rightAligned.isVisibleInWindow should be YES');
   });
-  
-  
+
+
   test("Check that all segments have the right classes set", function() {
     var viewElem=pane.view('3_empty').$();
-    var segments=pane.view('3_empty').$('a');
-    equals(segments.length, 3, 'precond - segmented view should have 3 segments');
+    var segments=pane.view('3_empty').$('.sc-segment-view');
+
+    equals(segments.length, 4, 'precond - segmented view should have 4 segment elements (including overflow)');
+
     ok(viewElem.hasClass('sc-view'), '3_empty.hasClass(sc-view) should be YES');
     ok(viewElem.hasClass('sc-segmented-view'), '3_empty.hasClass(sc-segmented-view) should be YES');
-    for (var i=0, ilen=segments.length; i<ilen; i++){
+    for (var i=0, seglen=segments.length - 1; i<seglen; i++){
       var seg=segments[i];
       if(i===0){
         ok((seg.className.indexOf('sc-first-segment')>=0), 'first segment has the right classname assigned.');
-      }    
-      if(i==segments.length-1){
+      }
+      if(i===seglen-1){
         ok((seg.className.indexOf('sc-last-segment')>=0), 'last segment has the right classname assigned.');
       }
       ok((seg.childNodes[0].className.indexOf('sc-button-inner')>=0), 'segment '+i+' should have an inner-button.');
       ok((seg.childNodes[0].childNodes[0].className.indexOf('sc-button-label')>=0), 'segment '+i+' should have a label.');
-        
-      if(i!==0 && i!=segments.length-1){
-        ok((seg.className.indexOf('sc-middle-segment')>=0), 'middle segment has the right classname assigned.');
+
+      if(i !== 0 && i < seglen-1) {
+        ok((seg.className.indexOf('sc-middle-segment')>=0), 'middle segments have the right classname assigned.');
       }
       viewElem=pane.view('3_items,2_sel,disabled').$();
       ok(viewElem.hasClass('disabled'), '3_items,2_sel,disabled should have the disabled class set');
     }
 
   });
-  
-  
-  test("Check that all segments have the right classes set", function() {
+
+
+  test("Check that all segments have the right classes set (with icons)", function() {
     var viewElem=pane.view('3_empty,icon').$();
-    var segments=pane.view('3_empty,icon').$('a');
-    equals(segments.length, 3, 'precond - segmented view should have 3 segments');
+    var segments=pane.view('3_empty,icon').$('.sc-segment-view');
+
+    equals(segments.length, 4, 'precond - segmented view should have 4 segment elements (including overflow)');
+
     ok(viewElem.hasClass('sc-view'), '3_empty.hasClass(sc-view) should be YES');
     ok(viewElem.hasClass('sc-segmented-view'), '3_empty.hasClass(sc-segmented-view) should be YES');
-    for (var i=0, ilen=segments.length; i<ilen; i++){
+    for (var i=0, seglen=segments.length - 1; i<seglen; i++){
       var seg=segments[i];
       if(i===0){
         ok((seg.className.indexOf('sc-first-segment')>=0), 'first segment has the right classname assigned.');
-      }    
-      if(i==segments.length-1){
+      }
+      if(i==seglen-1){
         ok((seg.className.indexOf('sc-last-segment')>=0), 'last segment has the right classname assigned.');
       }
       ok((seg.childNodes[0].className.indexOf('sc-button-inner')>=0), 'segment '+i+' should have an inner-button.');
       ok((seg.childNodes[0].childNodes[0].className.indexOf('sc-button-label')>=0), 'segment '+i+' should have a label.');
       ok((seg.childNodes[0].childNodes[0].childNodes[0].src.length>0), 'segment '+i+' should have an icon.');
-        
-      if(i!==0 && i!=segments.length-1){
-        ok((seg.className.indexOf('sc-middle-segment')>=0), 'middle segment has the right classname assigned.');
+
+      if(i!==0 && i!=seglen-1){
+        ok((seg.className.indexOf('sc-middle-segment')>=0), 'middle segments have the right classname assigned.');
       }
       viewElem=pane.view('3_items,2_sel,disabled').$();
       ok(viewElem.hasClass('disabled'), '3_items,2_sel,disabled should have the disabled class set');
     }
 
   });
-  
-  
-  test("Check that the selected segments have the right classes assigned.", function() {
-    var segments=pane.view('3_empty').$('a');
-    equals(segments.length, 3, 'precond - segmented view should have 3 segments');
+
+
+  test("No value set", function() {
+    var segments=pane.view('3_empty').$('.sc-segment-view');
+
+    // allow for a render to happen
+    SC.RunLoop.begin().end();
+
+    equals(segments.length, 4, 'precond - segmented view should have 4 segment elements (including overflow)');
     for (var i=0, ilen=segments.length; i<ilen; i++){
       var seg=segments[i];
       ok((seg.className.indexOf('sel')==-1), 'this element should not be selected.');
     }
 
   });
-  
-  
+
+
   test("Check that two items are selected.", function() {
-    var segments=pane.view('3_items,icon,2_sel').$('a');
+    var segments=pane.view('3_items,icon,2_sel').$('.sc-segment-view');
     var count=0;
-    equals(segments.length, 3, 'precond - segmented view should have 3 segments');
+
+    equals(segments.length, 4, 'precond - segmented view should have 4 segment elements (including overflow)');
+
     for (var i=0, ilen=segments.length; i<ilen; i++){
       var seg=segments[i];
       if(seg.className.indexOf('sel')!=-1){
@@ -262,111 +272,111 @@ var pane;
     equals(count, 2, '3_items,2_sel,disabled should have two segments selected.');
 
   });
-  
-  
+
+
   test("2_items,toolTip has toolTips assigned.", function() {
-    var segments=pane.view('2_items,toolTip').$('a');
+    var segments=pane.view('2_items,toolTip').$('.sc-segment-view');
     ok((segments[0].title=="this is title1's tip"), 'first segment has expected tool tip assigned.');
     ok((segments[1].title=="this is title2's tip"), 'second segment has expected tool tip assigned.');
   });
-  
+
   test("Check the alignment styles for align property.", function() {
     equals(pane.view("3_empty").$().css('text-align'), 'center', 'default align property should text-align the segmented-view to the center');
     equals(pane.view("3_items,leftAligned").$().css('text-align'), 'left', 'setting align: SC.ALIGN_LEFT should text-align the segmented-view to the left');
     equals(pane.view("3_items,rightAligned").$().css('text-align'), 'right', 'setting align: SC.ALIGN_LEFT should text-align the segmented-view to the left');
   });
-  
-  test("Check that changing title re-renders the segments (for hash or object items only).", function() {
+
+  test("Check that changing title re-renders the segments (for SC.Object items only).", function() {
     var sv = pane.view("3_items,widths");
-    var segments=sv.$('a');
+    var segments=sv.$('.sc-segment-view');
     var defaults = ['A', 'B', 'C'];
-    for (var i=0, len=segments.length; i < len; i++){
+    for (var i=0, len=segments.length - 1; i < len; i++){
       var segEl=segments[i];
       var label=$(segEl).find('label')[0];
       equals(label.innerHTML, defaults[i], 'there should be "' + defaults[i] + '" in the segment\'s label');
     }
-    
+
     // change the title of the second item
     var items = sv.get('items');
     items[1].set('value', 'Item 2');
-    
+
     // allow for a render to happen
     SC.RunLoop.begin().end();
-    
+
     segEl=segments[1];
     label=$(segEl).find('label')[0];
     equals(label.innerHTML, "Item 2", 'there should be "Item 2" text in the second segment');
   });
-  
+
   test("Check that changing width re-renders the segments (for hash or object items only).", function() {
     var sv = pane.view("3_items,widths");
-    var segments=sv.$('a');
-    for (var i=0, len=segments.length; i < len; i++){
+    var segments=sv.$('.sc-segment-view');
+    for (var i=0, len=segments.length - 1; i < len; i++){
       var segEl=segments[i];
       var width=$(segEl).css('width');
       equals(width, "70px", 'the segment style width should be "70px"');
     }
-    
+
     // change the width of the second item
     var items = sv.get('items');
     items[1].set('width', 100);
-    
+
     // allow for a render to happen
     SC.RunLoop.begin().end();
-    
+
     segEl=segments[1];
     width=$(segEl).css('width');
     equals(width, "100px", 'the second segment style width should be "100px"');
   });
-  
+
   test("Check that overflow adds an overflow segment on view.", function() {
     var sv = pane.view("5_items,widths,overflow");
     var lastIsOverflow = function(sv) {
       SC.RunLoop.begin().end(); // allow for a render to happen
-    
-      var segments=sv.$('a');
+
+      var segments=sv.$('.sc-segment-view');
       var overflowEl = segments[segments.length - 1];
       ok($(overflowEl).hasClass('sc-overflow-segment'), 'overflow segment should have .sc-overflow-segment class');
       var overflowLabelEl = $(overflowEl).find('label')[0];
       equals(overflowLabelEl.innerHTML, "»", 'there should be "»" text in the overflow segment');
     };
-    
+
     var lastIsSegment = function(sv, text) {
       SC.RunLoop.begin().end(); // allow for a render to happen
-    
-      var segments=sv.$('a');
-      var lastEl = segments[segments.length - 1];
+
+      var segments=sv.$('.sc-segment-view');
+      var lastEl = segments[segments.length - 2];
       ok(!$(lastEl).hasClass('sc-overflow-segment'), 'last segment should not have .sc-overflow-segment class');
       var lastLabelEl = $(lastEl).find('label')[0];
       equals(lastLabelEl.innerHTML, text, 'there should be "' + text + '" text in the last segment');
     };
-    
+
     // the last item should be an overflow segment (ie. has .sc-overflow-segment class and text "»")
     lastIsOverflow(sv);
-    
+
     // check that the overflowed items are stored
     var overflowItems = sv.overflowItems;
     equals(overflowItems.length, 2, "there should be 2 overflowed items");
-    
+
     // 1. remove the last two items (the last item should no longer be an overflow segment)
     var items = sv.get('items');
     items.removeAt(items.length - 1);
     items.removeAt(items.length - 1);
     lastIsSegment(sv, "C");
-    
+
     // 2. add an item (the last item should be an overflow segment again)
     items.pushObject({value: 'X', width: 100});
     lastIsOverflow(sv);
-    
+
     // 3. shrink the items (the last item should no longer be an overflow segment)
     items.invoke('set', 'width', 50);
     lastIsSegment(sv, "X");
-    
+
     // 4. grow the items (the last item should be an overflow segment again)
     items.invoke('set', 'width', 100);
     lastIsOverflow(sv);
-    
-    // 5. shrink the items, but then shrink the segmented view 
+
+    // 5. shrink the items, but then shrink the segmented view
     items.invoke('set', 'width', 50);
     lastIsSegment(sv, "X");
     sv.set('layout', {left: 75, right: 75, top: 0, height: 25});
@@ -376,11 +386,11 @@ var pane;
     SC.RunLoop.begin().end(); // allow for a render to happen (measure the segments)
     lastIsOverflow(sv);
   });
-  
+
   test("Check that the overflow segment is selected when overflowed items are selected.", function() {
     var sv = pane.view("5_items,1_sel,widths,overflow");
-    var segments=sv.$('a');
-    
+    var segments=sv.$('.sc-segment-view');
+
     // the overflow item should be selected (because an overflowed item is selected)
     var overflowEl = segments[segments.length - 1];
     ok($(overflowEl).hasClass('sel'), 'overflow segment should have .sel class');

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/tab/ui.js

@@ -12,10 +12,10 @@ htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
 
 (function() {
   var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
-  
+
   var pane = SC.ControlTestPane.design()
-    
-    .add("tabView1", SC.TabView, { 
+
+    .add("tabView1", SC.TabView, {
       nowShowing: 'tab2',
 
       items: [
@@ -23,15 +23,15 @@ htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
         { title: "tab2", value: "tab2" , icon: iconURL},
         { title: "tab3", value: "tab3" , icon: iconURL}
       ],
-      
+
       itemTitleKey: 'title',
       itemValueKey: 'value',
       itemIconKey: 'icon',
       layout: { left:12, height: 200, right:12, top:12 }
-      
+
   })
-  
-  .add("tabView2", SC.TabView, { 
+
+  .add("tabView2", SC.TabView, {
     nowShowing: 'tab3',
 
     items: [
@@ -39,50 +39,47 @@ htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
       { title: "tab2", value: "tab2" },
       { title: "tab3", value: "tab3" }
     ],
-    
+
     itemTitleKey: 'title',
     itemValueKey: 'value',
     layout: { left:12, height: 200, right:12, top:12 }
-    
+
     })
-    .add("tabView3", SC.TabView, { 
-      
+    .add("tabView3", SC.TabView, {
+
       items: [
         { title: "tab1", value: "tab1" },
         { title: "tab2", value: "tab2" },
         { title: "tab3", value: "tab3" }
       ],
-      
+
       itemTitleKey: 'title',
       itemValueKey: 'value',
       layout: { left:12, height: 200, right:12, top:12}
     });
-    
+
   pane.show(); // add a test to show the test pane
 
   // ..........................................................
   // TEST VIEWS
-  // 
+  //
   module('SC.TabView ui', pane.standardSetup());
-  
+
   test("Check that all tabViews are visible", function() {
     ok(pane.view('tabView1').get('isVisibleInWindow'), 'tabView1.isVisibleInWindow should be YES');
     ok(pane.view('tabView2').get('isVisibleInWindow'), 'tabView2.isVisibleInWindow should be YES');
     ok(pane.view('tabView3').get('isVisibleInWindow'), 'tabView3.isVisibleInWindow should be YES');
    });
-   
-   
+
+
    test("Check that the tabView has the right classes set", function() {
-     var viewElem=pane.view('tabView1').$();
-     var views=pane.view('tabView1').$('div');
+     var view = pane.view('tabView1');
+     var viewElem = view.$();
      ok(viewElem.hasClass('sc-view'), 'tabView1.hasClass(sc-view) should be YES');
      ok(viewElem.hasClass('sc-tab-view'), 'tabView1.hasClass(sc-tab-view) should be YES');
-     ok(views[1].className.indexOf('sc-segmented-view')>=0, 'tabView1 should contain a segmented view');
-     ok(views[0].className.indexOf('sc-container-view')>=0, 'tabView1 should contain a container view');
-     ok(views[1].childNodes.length==3, 'tabView1 should have 3 options');
-     
-
+     ok(view.$('.sc-segmented-view').length, 'tabView1 should contain a segmented view');
+     ok(view.$('.sc-container-view').length, 'tabView1 should contain a container view');
    });
-  
+
 
 })();

data/lib/frameworks/sproutcore/frameworks/desktop/views/collection.js

@@ -2300,26 +2300,22 @@ SC.CollectionView = SC.View.extend(
   // TOUCH EVENTS
   //
   touchStart: function(touch, evt) {
-    // When the user presses the mouse down, we don't do much just yet.
-    // Instead, we just need to save a bunch of state about the mouse down
-    // so we can choose the right thing to do later.
-
-    // Toggle selection only triggers on mouse up.  Do nothing.
-    if (this.get('useToggleSelection')) return true;
-
-    // find the actual view the mouse was pressed down on.  This will call
-    // hitTest() on item views so they can implement non-square detection
-    // modes. -- once we have an item view, get its content object as well.
-    var itemView      = this.itemViewForEvent(touch),
-        content       = this.get('content'),
-        contentIndex  = itemView ? itemView.get('contentIndex') : -1,
-        info, anchor ;
-        
     // become first responder if possible.
     this.becomeFirstResponder() ;
-    
-    this.invokeLater("select", 1, contentIndex);
-    
+
+    if (!this.get('useToggleSelection')) {
+      var itemView = this.itemViewForEvent(touch);
+
+      // We're faking the selection visually here
+      // Only track this if we added a selection so we can remove it later
+      if (itemView && !itemView.get('isSelected')) {
+        itemView.set('isSelected', YES);
+        this._touchSelectedView = itemView;
+      } else {
+        this._touchSelectedView = null;
+      }
+    }
+
     return YES;
   },
 
@@ -2329,22 +2325,39 @@ SC.CollectionView = SC.View.extend(
         Math.abs(touch.pageX - touch.startX) > 5 ||
         Math.abs(touch.pageY - touch.startY) > 5
       ) {
-        this.select(null, NO);
+        // This calls touchCancelled
         touch.makeTouchResponder(touch.nextTouchResponder);
       }
     }, this);
 
   },
-  
+
   touchEnd: function(touch) {
-    var itemView = this.itemViewForEvent(touch);
-    
-    // If actOnSelect is implemented, the action will be fired.
-    this._cv_performSelectAction(itemView, touch, 0);
+    var itemView = this.itemViewForEvent(touch),
+        contentIndex = itemView ? itemView.get('contentIndex') : -1,
+        isSelected = NO;
+
+    // Remove fake selection in case our contentIndex is -1, a select event will add it back
+    if (this._touchSelectedView) { this._touchSelectedView.set('isSelected', NO); }
+
+    if (this.get('useToggleSelection')) {
+      var sel = this.get('selection');
+      isSelected = sel && sel.containsObject(itemView.get('content'));
+    }
+
+    if (isSelected) {
+      this.deselect(contentIndex);
+    } else {
+      this.select(contentIndex, NO);
+
+      // If actOnSelect is implemented, the action will be fired.
+      this._cv_performSelectAction(itemView, touch, 0);
+    }
   },
 
   touchCancelled: function(evt) {
-    this.select(null, NO);
+    // Remove fake selection
+    if (this._touchSelectedView) { this._touchSelectedView.set('isSelected', NO); }
   },
 
   /** @private */

data/lib/frameworks/sproutcore/frameworks/desktop/views/date_field.js

@@ -85,7 +85,7 @@ SC.DateFieldView = SC.TextFieldView.extend(
   FUTURE: DatePickerSupport.
   createChildViews: function() {
     sc_super();
-    if (SC.browser.safari) {
+    if (SC.browser.webkit) {
       // ON MOZILLA DON'T WORK
       var view = Shared.DatePickerView.extend({
         layout: { right: 0, centerY: 0, width: 18, height: 15 }

data/lib/frameworks/sproutcore/frameworks/desktop/views/scroll.js

@@ -764,7 +764,7 @@ SC.ScrollView = SC.View.extend(SC.Border, {
   // save adjustment and then invoke the actual scroll code later.  This will
   // keep the view feeling smooth.
   mouseWheel: function(evt) {
-    var deltaAdjust = (SC.browser.safari && SC.browser.version > 533.0) ? 120 : 1;
+    var deltaAdjust = (SC.browser.webkit && SC.browser.version > 533.0) ? 120 : 1;
     
     this._scroll_wheelDeltaX += evt.wheelDeltaX / deltaAdjust;
     this._scroll_wheelDeltaY += evt.wheelDeltaY / deltaAdjust;