ie) resolve recommendations

Author: phillipc

packages/binding.core/spec/textInputBehaviors.ts

@@ -29,6 +29,35 @@ describe('Binding: TextInput', function () {
     bindingHandlers.set(coreBindings)
   })
 
+  it('User-Agent detection IE10 + IE11', function () {
+    let uaList = [
+      { agent: 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0', version: 9 },
+      { agent: 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)', version: 10 },
+      { agent: 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko', version: 11 },
+      {
+        agent:
+          'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0',
+        version: null
+      },
+      {
+        agent:
+          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586',
+        version: null
+      },
+      {
+        agent:
+          'Mozilla/5.0 (Macintosh; Intel Mac OS X 15_7_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15',
+        version: null
+      }
+    ]
+
+    uaList.forEach(userAgent => {
+      let match = userAgent['agent'].match(/MSIE ([^ ;]+)|rv:([^ )]+)/)
+      let ieVersion = match && (parseFloat(match[1]) || parseFloat(match[2]))
+      expect(ieVersion).toBe(userAgent['version'])
+    })
+  })
+
   it('Should assign the value to the node', function () {
     testNode.innerHTML = "<input data-bind='textInput:123' />"
     applyBindings(null, testNode)

packages/binding.core/spec/valueBehaviors.ts

@@ -310,7 +310,7 @@ describe('Binding: Value', function () {
     // 2. Modify the textbox further
     // 3. Tab out of the textbox
     testNode.childNodes[0].value = 'some user-entered value'
-    triggerEvent(testNode.childNodes[0], 'propertychange')
+    //IE: triggerEvent(testNode.childNodes[0], 'propertychange')
     triggerEvent(testNode.childNodes[0], 'change')
     expect(myObservable()).toEqual('some user-entered value')
     expect(numUpdates).toEqual(1)
@@ -322,7 +322,7 @@ describe('Binding: Value', function () {
     // 2. Tab out of the textbox
     // 3. Reselect, edit, then tab out of the textbox
     testNode.childNodes[0].value = 'different user-entered value'
-    triggerEvent(testNode.childNodes[0], 'propertychange')
+    //IE: triggerEvent(testNode.childNodes[0], 'propertychange')
     triggerEvent(testNode.childNodes[0], 'blur')
     expect(myObservable()).toEqual('some user-entered value')
     expect(numUpdates).toEqual(1)

packages/binding.core/src/textInput.ts

@@ -4,7 +4,7 @@ import { unwrap } from '@tko/observable'
 
 import { BindingHandler } from '@tko/bind'
 
-let operaVersion, safariVersion, firefoxVersion
+let operaVersion, safariVersion, firefoxVersion, ieVersion
 
 /**
  * TextInput binding handler for modern browsers (legacy below).
@@ -100,6 +100,13 @@ class TextInput extends BindingHandler {
   }
 }
 
+class TextInputIE extends TextInput {
+  override eventsIndicatingSyncValueChange() {
+    //keypress: All versions (including 11) of Internet Explorer have a bug that they don't generate an input or propertychange event when ESC is pressed
+    return [...super.eventsIndicatingSyncValueChange(), 'keypress']
+  }
+}
+
 // Safari <5 doesn't fire the 'input' event for <textarea> elements (it does fire 'textInput'
 // but only when typing). So we'll just catch as much as we can with keydown, cut, and paste.
 class TextInputLegacySafari extends TextInput {
@@ -134,17 +141,23 @@ if (w.navigator) {
   const parseVersion = matches => matches && parseFloat(matches[1])
   const userAgent = w.navigator.userAgent
   const isChrome = userAgent.match(/Chrome\/([^ ]+)/)
-  // Detect various browser versions because some old versions don't fully support the 'input' event
-  operaVersion = w.opera && w.opera.version && parseInt(w.opera.version())
-  safariVersion = parseVersion(userAgent.match(/Version\/([^ ]+) Safari/))
-  firefoxVersion = parseVersion(userAgent.match(/Firefox\/([^ ]*)/))
+  if (!isChrome) {
+    // Detect various browser versions because some old versions don't fully support the 'input' event
+    operaVersion = w.opera && w.opera.version && parseInt(w.opera.version())
+    safariVersion = parseVersion(userAgent.match(/Version\/([^ ]+) Safari/))
+    firefoxVersion = parseVersion(userAgent.match(/Firefox\/([^ ]*)/))
+    const ieMatch = userAgent.match(/MSIE ([^ ;]+)|rv:([^ )]+)/)
+    ieVersion = ieMatch && (parseFloat(ieMatch[1]) || parseFloat(ieMatch[2]))
+  }
 }
 
 export const textInput =
-  safariVersion && safariVersion < 5
-    ? TextInputLegacySafari
-    : operaVersion < 11
-      ? TextInputLegacyOpera
-      : firefoxVersion && firefoxVersion < 4
-        ? TextInputLegacyFirefox
-        : TextInput
+  ieVersion && ieVersion <= 11
+    ? TextInputIE
+    : safariVersion && safariVersion < 5
+      ? TextInputLegacySafari
+      : operaVersion && operaVersion < 11
+        ? TextInputLegacyOpera
+        : firefoxVersion && firefoxVersion < 4
+          ? TextInputLegacyFirefox
+          : TextInput

packages/binding.core/src/value.ts

@@ -67,7 +67,7 @@ export class value extends BindingHandler {
       && this.$element.type == 'text'
       && this.$element.autocomplete != 'off'
       && (!this.$element.form || this.$element.form.autocomplete != 'off')
-      && (window.navigator.userAgent.match(/MSIE ([^ ]+)/) || window.navigator.userAgent.match(/rv:([^ )]+)/)) //only if IE10 or IE11
+      && window.navigator.userAgent.match(/MSIE ([^ ;]+)|rv:([^ )]+)/) //only if IE10 or IE11
     )
   }
 

packages/utils/src/dom/data.ts

@@ -18,25 +18,21 @@ function isSafeKey(key: string): boolean {
  * prevents using it cross-window, so instead we just store the data directly
  * on the node. See https://github.com/knockout/knockout/issues/2141
  */
-const modern = {
-  getDataForNode(node: Node, createIfNotFound: boolean) {
-    let dataForNode = node[dataStoreSymbol]
-    if (!dataForNode && createIfNotFound) {
-      dataForNode = node[dataStoreSymbol] = {}
-    }
-    return dataForNode
-  },
-
-  clear(node: Node) {
-    if (node[dataStoreSymbol]) {
-      delete node[dataStoreSymbol]
-      return true
-    }
-    return false
+function getDataForNode(node: Node, createIfNotFound: boolean): any {
+  let dataForNode = node[dataStoreSymbol]
+  if (!dataForNode && createIfNotFound) {
+    dataForNode = node[dataStoreSymbol] = {}
   }
+  return dataForNode
 }
 
-const { getDataForNode, clear } = modern
+function clear(node: Node): boolean {
+  if (node[dataStoreSymbol]) {
+    delete node[dataStoreSymbol]
+    return true
+  }
+  return false
+}
 
 /**
  * Create a unique key-string identifier.

packages/utils/src/dom/event.ts

@@ -4,19 +4,15 @@
 
 import { objectForEach } from '../object'
 import { catchFunctionErrors } from '../error'
-
 import { tagNameLower } from './info'
-import { addDisposeCallback } from './disposal'
+
 import options from '../options'
 
 // Represent the known event types in a compact way, then at runtime transform it into a hash with event name as key (for fast lookup)
 const knownEvents = {},
   knownEventTypesByEventName = {}
 
-const keyEventTypeName =
-  options.global.navigator && /Firefox\/2/i.test(options.global.navigator.userAgent) ? 'KeyboardEvent' : 'UIEvents'
-
-knownEvents[keyEventTypeName] = ['keyup', 'keydown', 'keypress']
+knownEvents['UIEvents'] = ['keyup', 'keydown', 'keypress']
 
 knownEvents['MouseEvents'] = [
   'click',
@@ -45,14 +41,6 @@ function isClickOnCheckableElement(element: Element, eventType: string) {
   return inputType == 'checkbox' || inputType == 'radio'
 }
 
-function hasIEAttachEvents(
-  el: Element
-): el is Element & { attachEvent: (event: string, handler: EventListener) => void } & {
-  detachEvent: (event: string, handler: EventListener) => void
-} {
-  return typeof (el as any).attachEvent === 'function' && typeof (el as any).detachEvent === 'function'
-}
-
 export function registerEventHandler(
   element: Element,
   eventType: string,
@@ -67,18 +55,6 @@ export function registerEventHandler(
     jQuery(element).on(eventType, wrappedHandler)
   } else if (typeof element.addEventListener === 'function') {
     element.addEventListener(eventType, wrappedHandler, eventOptions)
-  } else if (hasIEAttachEvents(element)) {
-    const attachEventHandler = function (event) {
-      wrappedHandler.call(element, event)
-    }
-    const attachEventName = 'on' + eventType
-    element.attachEvent(attachEventName, attachEventHandler)
-
-    // IE does not dispose attachEvent handlers automatically (unlike with addEventListener)
-    // so to avoid leaks, we have to remove them manually. See bug #856
-    addDisposeCallback(element, function () {
-      element.detachEvent(attachEventName, attachEventHandler)
-    })
   } else {
     throw new Error("Browser doesn't support addEventListener or attachEvent")
   }
@@ -88,19 +64,13 @@ function hasClick(element: Element): element is Element & { click(): void } {
   return typeof (element as any).click === 'function'
 }
 
-function hasFireEvent(element: Element): element is Element & { fireEvent(eventType: string): void } {
-  return typeof (element as any).click === 'function'
-}
-
 export function triggerEvent(element: Element, eventType: string): void {
   if (!(element && element.nodeType)) {
     throw new Error('element must be a DOM node when calling triggerEvent')
   }
 
   // For click events on checkboxes and radio buttons, jQuery toggles the element checked state *after* the
   // event handler runs instead of *before*. (This was fixed in 1.9 for checkboxes but not for radio buttons.)
-  // IE doesn't change the checked state when you trigger the click event using "fireEvent".
-  // In both cases, we'll use the click method instead.
   const useClickWorkaround = isClickOnCheckableElement(element, eventType)
 
   if (!options.useOnlyNativeEvents && options.jQuery && !useClickWorkaround) {
@@ -132,8 +102,6 @@ export function triggerEvent(element: Element, eventType: string): void {
     }
   } else if (useClickWorkaround && hasClick(element)) {
     element.click()
-  } else if (hasFireEvent(element)) {
-    element.fireEvent('on' + eventType)
   } else {
     throw new Error("Browser doesn't support triggering events")
   }

packages/utils/src/dom/virtualElements.ts

@@ -11,35 +11,22 @@
 // The point of all this is to support containerless templates (e.g., <!-- ko foreach:someCollection -->blah<!-- /ko -->)
 // without having to scatter special cases all over the binding and templating code.
 
-// IE 9 cannot reliably read the "nodeValue" property of a comment node (see https://github.com/SteveSanderson/knockout/issues/186)
-// but it does give them a nonstandard alternative property called "text" that it can read reliably. Other browsers don't have that property.
-// So, use node.text where available, and node.nodeValue elsewhere
 import { emptyDomNode, setDomNodeChildren as setRegularDomNodeChildren } from './manipulation'
 import { removeNode } from './disposal'
 import { tagNameLower } from './info'
 import * as domData from './data'
 import options from '../options'
 
-const commentNodesHaveTextProperty = options.document && 'text' in options.document.createComment('test') //in case of IE8..
-
-export const startCommentRegex = commentNodesHaveTextProperty
-  ? /^<!--\s*ko(?:\s+([\s\S]+))?\s*-->$/
-  : /^\s*ko(?:\s+([\s\S]+))?\s*$/
-export const endCommentRegex = commentNodesHaveTextProperty ? /^<!--\s*\/ko\s*-->$/ : /^\s*\/ko\s*$/
+export const startCommentRegex = /^\s*ko(?:\s+([\s\S]+))?\s*$/
+export const endCommentRegex = /^\s*\/ko\s*$/
 const htmlTagsWithOptionallyClosingChildren = { ul: true, ol: true }
 
 export function isStartComment(node) {
-  return (
-    node.nodeType === Node.COMMENT_NODE
-    && startCommentRegex.test(commentNodesHaveTextProperty ? node.text : node.nodeValue)
-  )
+  return node.nodeType === Node.COMMENT_NODE && startCommentRegex.test(node.nodeValue)
 }
 
 export function isEndComment(node) {
-  return (
-    node.nodeType === Node.COMMENT_NODE
-    && endCommentRegex.test(commentNodesHaveTextProperty ? node.text : node.nodeValue)
-  )
+  return node.nodeType === Node.COMMENT_NODE && endCommentRegex.test(node.nodeValue)
 }
 
 function isUnmatchedEndComment(node) {
@@ -248,9 +235,7 @@ export function previousSibling(node) {
 }
 
 export function virtualNodeBindingValue(node): string | null {
-  const regexMatch = (commentNodesHaveTextProperty ? node.text : node.nodeValue).match(
-    startCommentRegex
-  ) as RegExpMatchArray
+  const regexMatch = node.nodeValue.match(startCommentRegex) as RegExpMatchArray
   return regexMatch ? regexMatch[1] : null
 }