Merge pull request #208 from mcselle/main

Fix for hasFocus / checked binding if not applied via DataBindProvider

Author: phillipc

packages/binding.core/spec/checkedBehaviors.ts

@@ -4,12 +4,11 @@ import {
 } from '@tko/utils'
 
 import {
-    applyBindings
+    applyBindings, applyBindingsToNode
 } from '@tko/bind'
 
 import {
-    observable,
-    observableArray
+    observable, observableArray
 } from '@tko/observable'
 
 import {
@@ -33,6 +32,48 @@ describe('Binding: Checked', function () {
     provider.bindingHandlers.set(templateBindings)
   })
 
+  it('Checked Binding should update observable value if checked binding is applied in another CustomBinding', function () {
+    const RadioGroupExample  = {
+      init: (element: HTMLElement, valueAccessor: () => any) => {
+        const group = element;
+        const options = valueAccessor();
+        const items = options.items();
+
+        for (let i = 0; i < items.length; i++) {
+          //let radioBox = $('<input type="radio">').appendTo(group);
+          const radioInput = document.createElement('input');
+          radioInput.type = 'radio';
+          group.appendChild(radioInput);
+
+          applyBindingsToNode(radioInput, {
+            checked: items[i].checked,
+            attr:{
+              value: items[i].value
+            }
+          })
+        }
+      }
+    };
+
+    options.bindingProviderInstance.bindingHandlers.set("customBinding",  RadioGroupExample)
+
+    const $decision = observable("")
+    const yesOption = { value: "True", checked: $decision }
+    const noOption = { value: "False", checked: $decision }
+    
+    testNode.innerHTML = '<div data-bind="customBinding: radioBoxProp"></div>'
+    applyBindings({radioBoxProp: { items: observable([yesOption, noOption]) } }, testNode);
+
+    const yesRadio = testNode.children[0].children[0]
+    const noRadio = testNode.children[0].children[1]
+
+    expect($decision()).toEqual("")
+    triggerEvent(yesRadio, 'click')
+    expect($decision()).toEqual("True")
+    triggerEvent(noRadio, 'click')
+    expect($decision()).toEqual("False")
+  })
+
   it('Triggering a click should toggle a checkbox\'s checked state before the event handler fires', function () {
         // This isn't strictly to do with the checked binding, but if this doesn't work, the rest of the specs aren't meaningful
     testNode.innerHTML = "<input type='checkbox' />"

packages/binding.core/spec/hasfocusBehaviors.ts

@@ -3,7 +3,7 @@ import {
 } from '@tko/utils'
 
 import {
-    applyBindings
+    applyBindings, applyBindingsToNode
 } from '@tko/bind'
 
 import {
@@ -22,7 +22,6 @@ import * as coreBindings from '../dist'
 
 import '@tko/utils/helpers/jasmine-13-helper'
 
-
 arrayForEach(['hasfocus', 'hasFocus'], binding => {
   describe(`Binding: ${binding}`, function () {
     var bindingHandlers
@@ -42,6 +41,33 @@ arrayForEach(['hasfocus', 'hasFocus'], binding => {
       beforeEach(function () { waits(100) })
     }
 
+    it('Should set an observable value to be true on focus and false on blur even if the binding is applied through another binding', function () {
+      const createElementWithHasFocusBinding  = {
+        init: (element: HTMLElement, valueAccessor: () => any) => {
+          const parent = element;
+          const $hasFocus = valueAccessor();
+
+          applyBindingsToNode(parent, { hasFocus: $hasFocus })
+        }
+      };
+      options.bindingProviderInstance.bindingHandlers.set("customBinding",  createElementWithHasFocusBinding)
+
+      testNode.innerHTML = `<input data-bind='customBinding: customProps' /><input />`
+
+      const $myVal = observable(false)
+      applyBindings({customProps: $myVal}, testNode );
+      const input = testNode.children[0] as HTMLInputElement;
+
+      input.focus()
+      triggerEvent(input, 'focusin')
+      expect($myVal()).toEqual(true);
+
+      // Move the focus elsewhere
+      (testNode.childNodes[1] as HTMLElement).focus()
+      triggerEvent(input, 'focusout')
+      expect($myVal()).toEqual(false)
+    })
+
     it('Should respond to changes on an observable value by blurring or focusing the element', function () {
       var currentState
       var model = { myVal: observable() }

packages/binding.core/src/checked.ts

@@ -77,7 +77,11 @@ export var checked = {
             elemValue = undefined
           }
         }
-        valueAccessor(elemValue, {onlyIfChanged: true})
+        // valueAccessor(elemValue, {onlyIfChanged: true})
+        const modelValue = valueAccessor(elemValue, {onlyIfChanged: true});
+        if (isWriteableObservable(modelValue) && (modelValue.peek() !== elemValue)) {
+          modelValue(elemValue);
+        }
       }
     };
 

packages/binding.core/src/hasfocus.ts

@@ -4,7 +4,7 @@ import {
 } from '@tko/utils'
 
 import {
-    unwrap, dependencyDetection
+    unwrap, dependencyDetection, isWriteableObservable
 } from '@tko/observable'
 
 var hasfocusUpdatingProperty = createSymbolOrString('__ko_hasfocusUpdating')
@@ -31,9 +31,11 @@ export var hasfocus = {
         }
         isFocused = (active === element)
       }
-            // var modelValue = valueAccessor();
-      valueAccessor(isFocused, {onlyIfChanged: true})
 
+      const modelValue = valueAccessor(isFocused, {onlyIfChanged: true});
+      if (isWriteableObservable(modelValue) && (modelValue.peek() !== isFocused)) {
+        modelValue(isFocused);
+      }
             // cache the latest value, so we can avoid unnecessarily calling focus/blur in the update function
       element[hasfocusLastValue] = isFocused
       element[hasfocusUpdatingProperty] = false