From 1aca811f07a360db427930a67c2ef968a12ef884 Mon Sep 17 00:00:00 2001
From: Nurhan Turgut <nurhan@google.com>
Date: Wed, 27 Nov 2019 09:37:41 -0800
Subject: [PATCH 1/9] adding the default text editing strategy

---
 .../src/engine/text_editing/text_editing.dart    | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index edba66651a583..e3e23b2c6aba0 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -222,6 +222,22 @@ class InputConfiguration {
 typedef _OnChangeCallback = void Function(EditingState editingState);
 typedef _OnActionCallback = void Function(String inputAction);
 
+/// Interface defining the template for text editing strategies.
+///
+/// The starategies defined by this interface are:
+///  * position
+///  * attach
+///  * remove
+///  * add listeners
+///
+/// The algorithms will be picked in the runtime depending on the concrete
+/// class implementing the interface.
+///
+/// These algorithms is expected to differ by operating system and/or browser.
+abstract class TextEditingStrategy {
+
+}
+
 /// Wraps the DOM element used to provide text editing capabilities.
 ///
 /// The backing DOM element could be one of:

From 08ec6ec15f5edf95980467a7fe309a9ce56c8d91 Mon Sep 17 00:00:00 2001
From: Nurhan Turgut <nurhan@google.com>
Date: Wed, 4 Dec 2019 10:06:42 -0800
Subject: [PATCH 2/9] [DRAFT] Refactoring text editing. Strategy pattern is
 used to handle different browser/operating system and a11y behaviour. Unit
 tests are missing. Documentation needs updating.

---
 .../src/engine/text_editing/text_editing.dart | 575 +++++++++++-------
 1 file changed, 356 insertions(+), 219 deletions(-)

diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index e3e23b2c6aba0..d98dfaae3e970 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -12,16 +12,6 @@ const int _kReturnKeyCode = 13;
 
 void _emptyCallback(dynamic _) {}
 
-/// Indicates whether virtual keyboard shifts the location of input element.
-///
-/// Value decided using the operating system and the browser engine.
-///
-/// In iOS, the virtual keyboard might shifts the screen up to make input
-/// visible depending on the location of the focused input element.
-bool get _doesKeyboardShiftInput =>
-    browserEngine == BrowserEngine.webkit &&
-    operatingSystem == OperatingSystem.iOs;
-
 /// These style attributes are constant throughout the life time of an input
 /// element.
 ///
@@ -224,51 +214,42 @@ typedef _OnActionCallback = void Function(String inputAction);
 
 /// Interface defining the template for text editing strategies.
 ///
-/// The starategies defined by this interface are:
-///  * position
-///  * attach
-///  * remove
-///  * add listeners
-///
 /// The algorithms will be picked in the runtime depending on the concrete
 /// class implementing the interface.
 ///
 /// These algorithms is expected to differ by operating system and/or browser.
 abstract class TextEditingStrategy {
+  void initializeTextEditing(
+    InputConfiguration inputConfig, {
+    @required _OnChangeCallback onChange,
+    @required _OnActionCallback onAction,
+  });
 
-}
-
-/// Wraps the DOM element used to provide text editing capabilities.
-///
-/// The backing DOM element could be one of:
-///
-/// 1. `<input>`.
-/// 2. `<textarea>`.
-/// 3. `<span contenteditable="true">`.
-class TextEditingElement {
-  /// Creates a non-persistent [TextEditingElement].
-  ///
-  /// See [TextEditingElement.persistent] to understand what persistent mode is.
-  TextEditingElement(this.owner);
-
-  /// Timer that times when to set the location of the input text.
+  /// Set style to the native DOM element used for text editing.
   ///
-  /// This is only used for iOS. In iOS, virtual keyboard shifts the screen.
-  /// There is no callback to know if the keyboard is up and how much the screen
-  /// has shifted. Therefore instead of listening to the shift and passing this
-  /// information to Flutter Framework, we are trying to stop the shift.
+  /// It will be located exactly in the same place with the editable widgets,
+  /// however it's contents and cursor will be invisible.
   ///
-  /// In iOS, the virtual keyboard shifts the screen up if the focused input
-  /// element is under the keyboard or very close to the keyboard. Before the
-  /// focus is called we are positioning it offscreen. The location of the input
-  /// in iOS is set to correct place, 100ms after focus. We use this timer for
-  /// timing this delay.
-  Timer _positionInputElementTimer;
-  static const Duration _delayBeforePositioning =
-      const Duration(milliseconds: 100);
+  /// Users can interact with the element and use the functionalities of the
+  /// right-click menu. Such as copy,paste, cut, select, translate...
+  void initializeElementPosition();
 
-  final HybridTextEditing owner;
+  void addEventHandlers();
+
+  void updateElementPosition(_GeometricInfo geometricInfo);
+
+  void setTextEditingState(EditingState editingState);
+
+  void updateElementStyle(_EditingStyle style);
+
+  /// Disables the element so it's no longer used for text editing.
+  ///
+  /// Calling [disable] also removes any registered event listeners.
+  void disableTextEditing();
+}
 
+/// Default behaviour for text editing.
+class DefaultTextEditingStrategy implements TextEditingStrategy {
   @visibleForTesting
   bool isEnabled = false;
 
@@ -288,104 +269,66 @@ class TextEditingElement {
   final List<StreamSubscription<html.Event>> _subscriptions =
       <StreamSubscription<html.Event>>[];
 
-  /// Whether or not the input element can be positioned at this point in time.
-  ///
-  /// This is currently only used in iOS. It's set to false before focusing the
-  /// input field, and set back to true after a short timer. We do this because
-  /// if the input field is positioned before focus, it could be pushed to an
-  /// incorrect position by the virtual keyboard.
-  ///
-  /// See:
-  ///
-  /// * [_delayBeforePositioning] which controls how long to wait before
-  ///   positioning the input field.
-  bool _canPosition = true;
-
-  /// Enables the element so it can be used to edit text.
-  ///
-  /// Register [callback] so that it gets invoked whenever any change occurs in
-  /// the text editing element.
-  ///
-  /// Changes could be:
-  /// - Text changes, or
-  /// - Selection changes.
-  void enable(
+  @override
+  void initializeTextEditing(
     InputConfiguration inputConfig, {
     @required _OnChangeCallback onChange,
     @required _OnActionCallback onAction,
   }) {
     assert(!isEnabled);
 
-    _initDomElement(inputConfig);
+    domElement = inputConfig.inputType.createDomElement();
+    if (inputConfig.obscureText) {
+      domElement.setAttribute('type', 'password');
+    }
+
+    final String autocorrectValue = inputConfig.autocorrect ? 'on' : 'off';
+    domElement.setAttribute('autocorrect', autocorrectValue);
+
+    _setStaticStyleAttributes(domElement);
+    _style?.applyToDomElement(domElement);
+    domRenderer.glassPaneElement.append(domElement);
+
     isEnabled = true;
     _inputConfiguration = inputConfig;
     _onChange = onChange;
     _onAction = onAction;
+    initializeElementPosition();
+  }
 
-    // Chrome on Android will hide the onscreen keyboard when you tap outside
-    // the text box. Instead, we want the framework to tell us to hide the
-    // keyboard via `TextInput.clearClient` or `TextInput.hide`.
-    //
-    // Safari on iOS does not hide the keyboard as a side-effect of tapping
-    // outside the editable box. Instead it provides an explicit "done" button,
-    // which is reported as "blur", so we must not reacquire focus when we see
-    // a "blur" event and let the keyboard disappear.
-    if (browserEngine == BrowserEngine.blink ||
-        browserEngine == BrowserEngine.unknown) {
-      _subscriptions.add(domElement.onBlur.listen((_) {
-        if (isEnabled) {
-          _refocus();
-        }
-      }));
-    }
-
-    if (_doesKeyboardShiftInput) {
-      _preventShiftDuringFocus();
-    }
-    domElement.focus();
-
-    if (_lastEditingState != null) {
-      setEditingState(_lastEditingState);
-    }
+  @override
+  void initializeElementPosition() {
+    positionElement();
+  }
 
+  @override
+  void addEventHandlers() {
     // Subscribe to text and selection changes.
     _subscriptions.add(domElement.onInput.listen(_handleChange));
 
     _subscriptions.add(domElement.onKeyDown.listen(_maybeSendAction));
 
-    /// Detects changes in text selection.
-    ///
-    /// Currently only used in Firefox.
-    ///
-    /// In Firefox, when cursor moves, neither selectionChange nor onInput
-    /// events are triggered. We are listening to keyup event. Selection start,
-    /// end values are used to decide if the text cursor moved.
-    ///
-    /// Specific keycodes are not checked since users/applications can bind
-    /// their own keys to move the text cursor.
-    /// Decides if the selection has changed (cursor moved) compared to the
-    /// previous values.
-    ///
-    /// After each keyup, the start/end values of the selection is compared to the
-    /// previously saved editing state.
-    if (browserEngine == BrowserEngine.firefox) {
-      _subscriptions.add(domElement.onKeyUp.listen((event) {
-        _handleChange(event);
-      }));
+    _subscriptions.add(html.document.onSelectionChange.listen(_handleChange));
+  }
 
-      /// In Firefox the context menu item "Select All" does not work without
-      /// listening to onSelect. On the other browsers onSelectionChange is
-      /// enough for covering "Select All" functionality.
-      _subscriptions.add(domElement.onSelect.listen(_handleChange));
-    } else {
-      _subscriptions.add(html.document.onSelectionChange.listen(_handleChange));
+  @override
+  void updateElementPosition(_GeometricInfo geometricInfo) {
+    _geometricInfo = geometricInfo;
+    if (isEnabled) {
+      positionElement();
     }
   }
 
-  /// Disables the element so it's no longer used for text editing.
-  ///
-  /// Calling [disable] also removes any registered event listeners.
-  void disable() {
+  @override
+  void updateElementStyle(_EditingStyle style) {
+    _style = style;
+    if (isEnabled) {
+      _style.applyToDomElement(domElement);
+    }
+  }
+
+  @override
+  void disableTextEditing() {
     assert(isEnabled);
 
     isEnabled = false;
@@ -397,58 +340,115 @@ class TextEditingElement {
       _subscriptions[i].cancel();
     }
     _subscriptions.clear();
-    _positionInputElementTimer?.cancel();
-    _positionInputElementTimer = null;
-    _removeDomElement();
+    domElement.remove();
+    domElement = null;
   }
 
-  void _initDomElement(InputConfiguration inputConfig) {
-    domElement = inputConfig.inputType.createDomElement();
-    inputConfig.inputType.configureDomElement(domElement);
-    if (inputConfig.obscureText) {
-      domElement.setAttribute('type', 'password');
-    }
+  @override
+  void setTextEditingState(EditingState editingState) {
+    if (_lastEditingState != null) {
+      _lastEditingState = editingState;
+      if (!isEnabled || !editingState.isValid) {
+        return;
+      }
 
-    final String autocorrectValue = inputConfig.autocorrect ? 'on' : 'off';
-    domElement.setAttribute('autocorrect', autocorrectValue);
+      _lastEditingState.applyToDomElement(domElement);
 
-    _setStaticStyleAttributes(domElement);
-    applyAllStyles();
-    domRenderer.glassPaneElement.append(domElement);
+      // Re-focuses when setting editing state.
+      domElement.focus();
+    }
   }
 
-  void _removeDomElement() {
-    domElement.remove();
-    domElement = null;
+  void positionElement() {
+    _geometricInfo.applyToDomElement(domElement);
+    domElement.focus();
   }
 
-  void _refocus() {
-    domElement.focus();
+  void _handleChange(html.Event event) {
+    assert(isEnabled);
+    assert(domElement != null);
+
+    EditingState newEditingState = EditingState.fromDomElement(domElement);
+
+    assert(newEditingState != null);
+
+    if (newEditingState != _lastEditingState) {
+      _lastEditingState = newEditingState;
+      _onChange(_lastEditingState);
+    }
   }
 
-  /// Set style to the native DOM element used for text editing.
+  void _maybeSendAction(html.KeyboardEvent event) {
+    if (_inputConfiguration.inputType.submitActionOnEnter &&
+        event.keyCode == _kReturnKeyCode) {
+      event.preventDefault();
+      _onAction(_inputConfiguration.inputAction);
+    }
+  }
+}
+
+/// IOS/Safari behaviour for text editing.
+///
+/// In iOS, the virtual keyboard might shifts the screen up to make input
+/// visible depending on the location of the focused input element.
+///
+/// Due to this [initializeElementPosition] and [updateElementPosition]
+/// strategies are different.
+///
+/// [disableTextEditing] is also different since the [_positionInputElementTimer]
+/// also needs to be cleaned.
+///
+/// inputmodeAttribute needs to be set for mobile devices. Due to this
+/// [initializeTextEditing] is different.
+class IOSTextEditingStrategy extends DefaultTextEditingStrategy {
+  /// Timer that times when to set the location of the input text.
   ///
-  /// It will be located exactly in the same place with the editable widgets,
-  /// however it's contents and cursor will be invisible.
+  /// This is only used for iOS. In iOS, virtual keyboard shifts the screen.
+  /// There is no callback to know if the keyboard is up and how much the screen
+  /// has shifted. Therefore instead of listening to the shift and passing this
+  /// information to Flutter Framework, we are trying to stop the shift.
   ///
-  /// Users can interact with the element and use the functionalities of the
-  /// right-click menu. Such as copy,paste, cut, select, translate...
-  void applyAllStyles() {
-    _style?.applyToDomElement(domElement);
-    _positionElement();
-  }
+  /// In iOS, the virtual keyboard shifts the screen up if the focused input
+  /// element is under the keyboard or very close to the keyboard. Before the
+  /// focus is called we are positioning it offscreen. The location of the input
+  /// in iOS is set to correct place, 100ms after focus. We use this timer for
+  /// timing this delay.
+  Timer _positionInputElementTimer;
+  static const Duration _delayBeforePositioning =
+      const Duration(milliseconds: 100);
 
-  void _positionElement() {
-    if (_canPosition && _geometricInfo != null) {
-      _geometricInfo.applyToDomElement(domElement);
-    }
+  /// Whether or not the input element can be positioned at this point in time.
+  ///
+  /// This is currently only used in iOS. It's set to false before focusing the
+  /// input field, and set back to true after a short timer. We do this because
+  /// if the input field is positioned before focus, it could be pushed to an
+  /// incorrect position by the virtual keyboard.
+  ///
+  /// See:
+  ///
+  /// * [_delayBeforePositioning] which controls how long to wait before
+  ///   positioning the input field.
+  bool _canPosition = true;
+
+  @override
+  void initializeTextEditing(
+    InputConfiguration inputConfig, {
+    @required _OnChangeCallback onChange,
+    @required _OnActionCallback onAction,
+  }) {
+    super.initializeTextEditing(inputConfig,
+        onChange: onChange, onAction: onAction);
+    inputConfig.inputType.configureDomElement(domElement);
   }
 
-  void _preventShiftDuringFocus() {
-    // Position the element outside of the page before focusing on it.
-    //
-    // See [_positionInputElementTimer].
-    owner.setStyleOutsideOfScreen(domElement);
+  @override
+  void initializeElementPosition() {
+    /// Position the element outside of the page before focusing on it. This is
+    /// useful for not triggering a scroll when iOS virtual keyboard is
+    /// coming up.
+    /// See [TextEditingElement._delayBeforePositioning].
+    domElement.style.transform = 'translate(-9999px, -9999px)';
+
     _canPosition = false;
 
     // TODO(mdebbar): Should we remove this listener after the first invocation?
@@ -457,7 +457,8 @@ class TextEditingElement {
       _positionInputElementTimer?.cancel();
       _positionInputElementTimer = Timer(_delayBeforePositioning, () {
         _canPosition = true;
-        _positionElement();
+        // Position element.
+        _geometricInfo?.applyToDomElement(domElement);
       });
 
       // When the virtual keyboard is closed on iOS, onBlur is triggered.
@@ -471,52 +472,212 @@ class TextEditingElement {
     }));
   }
 
-  void setEditingState(EditingState editingState) {
-    _lastEditingState = editingState;
-    if (!isEnabled || !editingState.isValid) {
-      return;
+  @override
+  void updateElementPosition(_GeometricInfo geometricInfo) {
+    _geometricInfo = geometricInfo;
+    if (isEnabled && _canPosition) {
+      positionElement();
     }
+  }
 
-    _lastEditingState.applyToDomElement(domElement);
+  @override
+  void disableTextEditing() {
+    super.disableTextEditing();
+    _positionInputElementTimer?.cancel();
+    _positionInputElementTimer = null;
+  }
+}
 
-    // Re-focuses when setting editing state.
-    domElement.focus();
+/// Android behaviour for text editing.
+///
+/// inputmodeAttribute needs to be set for mobile devices. Due to this
+/// [initializeTextEditing] is different.
+///
+/// Keyboard acts differently than other devices. [addEventHandlers] handles
+/// this case as an extra.
+class AndroidTextEditingStrategy extends DefaultTextEditingStrategy {
+  @override
+  void initializeTextEditing(
+    InputConfiguration inputConfig, {
+    @required _OnChangeCallback onChange,
+    @required _OnActionCallback onAction,
+  }) {
+    super.initializeTextEditing(inputConfig,
+        onChange: onChange, onAction: onAction);
+    inputConfig.inputType.configureDomElement(domElement);
   }
 
-  void setGeometricInfo(_GeometricInfo geometricInfo) {
-    _geometricInfo = geometricInfo;
-    if (isEnabled) {
-      _positionElement();
+  @override
+  void addEventHandlers() {
+    super.addEventHandlers();
+    // Chrome on Android will hide the onscreen keyboard when you tap outside
+    // the text box. Instead, we want the framework to tell us to hide the
+    // keyboard via `TextInput.clearClient` or `TextInput.hide`.
+    //
+    // Safari on iOS does not hide the keyboard as a side-effect of tapping
+    // outside the editable box. Instead it provides an explicit "done" button,
+    // which is reported as "blur", so we must not reacquire focus when we see
+    // a "blur" event and let the keyboard disappear.
+    if (browserEngine == BrowserEngine.blink ||
+        browserEngine == BrowserEngine.unknown) {
+      _subscriptions.add(domElement.onBlur.listen((_) {
+        if (isEnabled) {
+          // Refocus.
+          domElement.focus();
+        }
+      }));
     }
   }
+}
 
-  void setStyle(_EditingStyle style) {
-    _style = style;
-    if (isEnabled) {
-      _style.applyToDomElement(domElement);
-    }
+/// Firefox behaviour for text editing.
+///
+/// Selections are different in Firefox. [addEventHandlers] strategy is
+/// impelemented diefferently in Firefox.
+class FirefoxTextEditingStrategy extends DefaultTextEditingStrategy {
+  @override
+  void addEventHandlers() {
+    // Subscribe to text and selection changes.
+    _subscriptions.add(domElement.onInput.listen(_handleChange));
+
+    _subscriptions.add(domElement.onKeyDown.listen(_maybeSendAction));
+
+    /// Detects changes in text selection.
+    ///
+    /// In Firefox, when cursor moves, neither selectionChange nor onInput
+    /// events are triggered. We are listening to keyup event. Selection start,
+    /// end values are used to decide if the text cursor moved.
+    ///
+    /// Specific keycodes are not checked since users/applications can bind
+    /// their own keys to move the text cursor.
+    /// Decides if the selection has changed (cursor moved) compared to the
+    /// previous values.
+    ///
+    /// After each keyup, the start/end values of the selection is compared to the
+    /// previously saved editing state.
+    _subscriptions.add(domElement.onKeyUp.listen((event) {
+      _handleChange(event);
+    }));
+
+    /// In Firefox the context menu item "Select All" does not work without
+    /// listening to onSelect. On the other browsers onSelectionChange is
+    /// enough for covering "Select All" functionality.
+    _subscriptions.add(domElement.onSelect.listen(_handleChange));
   }
+}
 
-  void _handleChange(html.Event event) {
-    assert(isEnabled);
-    assert(domElement != null);
+/// Text editing used by accesibilty mode.
+///
+/// In accesibilty mode, the user of this class is supposed to insert and remove
+/// the [domElement] on their own. Due to this [initializeTextEditing],
+/// [initializeTextEditing] and [disableTextEditing] strategies are handled
+/// differently.
+class AccesibiltyModeTextEditingStrategy extends DefaultTextEditingStrategy {
+  @override
+  void disableTextEditing() {
+    // We don't want to remove the DOM element because the caller is responsible
+    // for that.
+    //
+    // Remove focus from the editable element to cause the keyboard to hide.
+    // Otherwise, the keyboard stays on screen even when the user navigates to
+    // a different screen (e.g. by hitting the "back" button).
+    domElement.blur();
+  }
 
-    EditingState newEditingState = EditingState.fromDomElement(domElement);
+  @override
+  void initializeElementPosition() {
+    // No-op
+  }
 
-    assert(newEditingState != null);
+  @override
+  void initializeTextEditing(InputConfiguration inputConfig,
+      {_OnChangeCallback onChange, _OnActionCallback onAction}) {
+    // In accesibilty mode, the user of this class is supposed to insert the
+    // [domElement] on their own. Let's make sure they did.
+    assert(domElement != null);
+    assert(html.document.body.contains(domElement));
+  }
+}
 
-    if (newEditingState != _lastEditingState) {
-      _lastEditingState = newEditingState;
-      _onChange(_lastEditingState);
+/// Wraps the DOM element used to provide text editing capabilities.
+///
+/// The backing DOM element could be one of:
+///
+/// 1. `<input>`.
+/// 2. `<textarea>`.
+/// 3. `<span contenteditable="true">`.
+class TextEditingElement {
+  /// Creates a non-persistent [TextEditingElement].
+  ///
+  /// See [TextEditingElement.persistent] to understand what persistent mode is.
+  TextEditingElement(this.owner) {
+    if (browserEngine == BrowserEngine.webkit &&
+        operatingSystem == OperatingSystem.iOs) {
+      this.textEditingStrategy = IOSTextEditingStrategy();
+    } else if (browserEngine == BrowserEngine.blink &&
+        operatingSystem == OperatingSystem.android) {
+      this.textEditingStrategy = AndroidTextEditingStrategy();
+    } else if (browserEngine == BrowserEngine.firefox) {
+      this.textEditingStrategy = FirefoxTextEditingStrategy();
+    } else {
+      this.textEditingStrategy = DefaultTextEditingStrategy();
     }
   }
 
-  void _maybeSendAction(html.KeyboardEvent event) {
-    if (_inputConfiguration.inputType.submitActionOnEnter &&
-        event.keyCode == _kReturnKeyCode) {
-      event.preventDefault();
-      _onAction(_inputConfiguration.inputAction);
-    }
+  TextEditingStrategy textEditingStrategy;
+
+  final HybridTextEditing owner;
+
+  @visibleForTesting
+  bool isEnabled = false;
+
+  EditingState _lastEditingState;
+
+  /// Enables the element so it can be used to edit text.
+  ///
+  /// Register [callback] so that it gets invoked whenever any change occurs in
+  /// the text editing element.
+  ///
+  /// Changes could be:
+  /// - Text changes, or
+  /// - Selection changes.
+  void enable(
+    InputConfiguration inputConfig, {
+    @required _OnChangeCallback onChange,
+    @required _OnActionCallback onAction,
+  }) {
+    assert(!isEnabled);
+
+    _initDomElement(inputConfig, onChange: onChange, onAction: onAction);
+
+    textEditingStrategy.addEventHandlers();
+
+    textEditingStrategy.setTextEditingState(this._lastEditingState);
+  }
+
+  void setEditingState(EditingState editingState) {
+    textEditingStrategy.setTextEditingState(editingState);
+  }
+
+  void _initDomElement(
+    InputConfiguration inputConfig, {
+    @required _OnChangeCallback onChange,
+    @required _OnActionCallback onAction,
+  }) {
+    textEditingStrategy.initializeTextEditing(inputConfig,
+        onChange: onChange, onAction: onAction);
+  }
+
+  void disableTextEditing() {
+    textEditingStrategy.disableTextEditing();
+  }
+
+  void setGeometricInfo(_GeometricInfo geometricInfo) {
+    textEditingStrategy.updateElementPosition(geometricInfo);
+  }
+
+  void setStyle(_EditingStyle style) {
+    textEditingStrategy.updateElementStyle(style);
   }
 }
 
@@ -544,34 +705,10 @@ class PersistentTextEditingElement extends TextEditingElement {
     // TODO(yjbanov): move into initializer list when https://github.com/dart-lang/sdk/issues/37881 is fixed.
     assert((domElement is html.InputElement) ||
         (domElement is html.TextAreaElement));
-    this.domElement = domElement;
-  }
-
-  @override
-  void _initDomElement(InputConfiguration inputConfig) {
-    // In persistent mode, the user of this class is supposed to insert the
-    // [domElement] on their own. Let's make sure they did.
-    assert(domElement != null);
-    assert(html.document.body.contains(domElement));
-  }
-
-  @override
-  void _removeDomElement() {
-    // In persistent mode, we don't want to remove the DOM element because the
-    // caller is responsible for that.
-    //
-    // Remove focus from the editable element to cause the keyboard to hide.
-    // Otherwise, the keyboard stays on screen even when the user navigates to
-    // a different screen (e.g. by hitting the "back" button).
-    domElement.blur();
-  }
-
-  @override
-  void _refocus() {
-    // The semantic text field on Android listens to the focus event in order to
-    // switch to a new text field. If we refocus here, we break that
-    // functionality and the user can't switch from one text field to another in
-    // accessibility mode.
+    DefaultTextEditingStrategy defaultEditingStrategy =
+        AccesibiltyModeTextEditingStrategy();
+    defaultEditingStrategy.domElement = domElement;
+    this.textEditingStrategy = defaultEditingStrategy;
   }
 }
 
@@ -700,7 +837,7 @@ class HybridTextEditing {
   void stopEditing() {
     assert(isEditing);
     isEditing = false;
-    editingElement.disable();
+    editingElement.disableTextEditing();
   }
 
   void _syncEditingStateToFlutter(EditingState editingState) {

From 3e4fa5f691b69bec544569ac8b536b172f371750 Mon Sep 17 00:00:00 2001
From: Nurhan Turgut <nurhan@google.com>
Date: Mon, 9 Dec 2019 14:39:26 -0800
Subject: [PATCH 3/9] addressing PR comments

---
 lib/web_ui/lib/src/engine/text_editing/text_editing.dart | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index d98dfaae3e970..074321c5f5566 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -287,13 +287,13 @@ class DefaultTextEditingStrategy implements TextEditingStrategy {
 
     _setStaticStyleAttributes(domElement);
     _style?.applyToDomElement(domElement);
+    initializeElementPosition();
     domRenderer.glassPaneElement.append(domElement);
 
     isEnabled = true;
     _inputConfiguration = inputConfig;
     _onChange = onChange;
     _onAction = onAction;
-    initializeElementPosition();
   }
 
   @override
@@ -319,6 +319,7 @@ class DefaultTextEditingStrategy implements TextEditingStrategy {
     }
   }
 
+  @mustCallSuper
   @override
   void updateElementStyle(_EditingStyle style) {
     _style = style;
@@ -344,6 +345,7 @@ class DefaultTextEditingStrategy implements TextEditingStrategy {
     domElement = null;
   }
 
+  @mustCallSuper
   @override
   void setTextEditingState(EditingState editingState) {
     if (_lastEditingState != null) {
@@ -438,7 +440,7 @@ class IOSTextEditingStrategy extends DefaultTextEditingStrategy {
   }) {
     super.initializeTextEditing(inputConfig,
         onChange: onChange, onAction: onAction);
-    inputConfig.inputType.configureDomElement(domElement);
+    inputConfig.inputType.configureInputMode(domElement);
   }
 
   @override
@@ -504,7 +506,7 @@ class AndroidTextEditingStrategy extends DefaultTextEditingStrategy {
   }) {
     super.initializeTextEditing(inputConfig,
         onChange: onChange, onAction: onAction);
-    inputConfig.inputType.configureDomElement(domElement);
+    inputConfig.inputType.configureInputMode(domElement);
   }
 
   @override

From 34e79e7c2661e947b5705b61a6a946b219572c8a Mon Sep 17 00:00:00 2001
From: Nurhan Turgut <nurhan@google.com>
Date: Tue, 10 Dec 2019 18:08:40 -0800
Subject: [PATCH 4/9] addressing PR comments. Fixing documentation

---
 .../src/engine/text_editing/input_type.dart   |  2 +-
 .../src/engine/text_editing/text_editing.dart | 51 +++++++++++--------
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/lib/web_ui/lib/src/engine/text_editing/input_type.dart b/lib/web_ui/lib/src/engine/text_editing/input_type.dart
index 47c0ff7a09927..d7620c2f62584 100644
--- a/lib/web_ui/lib/src/engine/text_editing/input_type.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/input_type.dart
@@ -66,7 +66,7 @@ abstract class EngineInputType {
   html.HtmlElement createDomElement() => html.InputElement();
 
   /// Given a [domElement], set attributes that are specific to this input type.
-  void configureDomElement(html.HtmlElement domElement) {
+  void configureInputMode(html.HtmlElement domElement) {
     if (inputmodeAttribute == null) {
       return;
     }
diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index 074321c5f5566..8a2595f86f661 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -225,7 +225,7 @@ abstract class TextEditingStrategy {
     @required _OnActionCallback onAction,
   });
 
-  /// Set style to the native DOM element used for text editing.
+  /// Place the DOM element to its initial position.
   ///
   /// It will be located exactly in the same place with the editable widgets,
   /// however it's contents and cursor will be invisible.
@@ -234,12 +234,25 @@ abstract class TextEditingStrategy {
   /// right-click menu. Such as copy,paste, cut, select, translate...
   void initializeElementPosition();
 
+  /// Register event listeners to the DOM element.
+  ///
+  /// These event listener will be removed in [disableTextEditing].
   void addEventHandlers();
 
+  /// Update the element's position.
+  ///
+  /// The position will be updated everytime Flutter Framework sends
+  /// 'TextInput.setEditableSizeAndTransform' message.
   void updateElementPosition(_GeometricInfo geometricInfo);
 
+  /// Set editing state of the element.
+  ///
+  /// This includes text and selection relelated states. The editing state will
+  /// be updated everytime Flutter Framework sends 'TextInput.setEditingState'
+  /// message.
   void setTextEditingState(EditingState editingState);
 
+  /// Set style to the native DOM element used for text editing.
   void updateElementStyle(_EditingStyle style);
 
   /// Disables the element so it's no longer used for text editing.
@@ -248,7 +261,16 @@ abstract class TextEditingStrategy {
   void disableTextEditing();
 }
 
-/// Default behaviour for text editing.
+/// Class implementing the default editing strategies for text editing.
+///
+/// This class includes all the default behaviour for an editing element as
+/// well as the common properties such as [domElement].
+///
+/// Strategies written for different formfactor's/browser's should extend this
+/// class instead of extending the interface [TextEditingStrategy].
+///
+/// Unless a formfactor/browser requires specific implementation for a specific
+/// strategy the methods in this class should be used.
 class DefaultTextEditingStrategy implements TextEditingStrategy {
   @visibleForTesting
   bool isEnabled = false;
@@ -453,14 +475,12 @@ class IOSTextEditingStrategy extends DefaultTextEditingStrategy {
 
     _canPosition = false;
 
-    // TODO(mdebbar): Should we remove this listener after the first invocation?
     _subscriptions.add(domElement.onFocus.listen((_) {
       // Cancel previous timer if exists.
       _positionInputElementTimer?.cancel();
       _positionInputElementTimer = Timer(_delayBeforePositioning, () {
         _canPosition = true;
-        // Position element.
-        _geometricInfo?.applyToDomElement(domElement);
+        positionElement();
       });
 
       // When the virtual keyboard is closed on iOS, onBlur is triggered.
@@ -515,11 +535,6 @@ class AndroidTextEditingStrategy extends DefaultTextEditingStrategy {
     // Chrome on Android will hide the onscreen keyboard when you tap outside
     // the text box. Instead, we want the framework to tell us to hide the
     // keyboard via `TextInput.clearClient` or `TextInput.hide`.
-    //
-    // Safari on iOS does not hide the keyboard as a side-effect of tapping
-    // outside the editable box. Instead it provides an explicit "done" button,
-    // which is reported as "blur", so we must not reacquire focus when we see
-    // a "blur" event and let the keyboard disappear.
     if (browserEngine == BrowserEngine.blink ||
         browserEngine == BrowserEngine.unknown) {
       _subscriptions.add(domElement.onBlur.listen((_) {
@@ -555,8 +570,8 @@ class FirefoxTextEditingStrategy extends DefaultTextEditingStrategy {
     /// Decides if the selection has changed (cursor moved) compared to the
     /// previous values.
     ///
-    /// After each keyup, the start/end values of the selection is compared to the
-    /// previously saved editing state.
+    /// After each keyup, the start/end values of the selection is compared to
+    /// the previously saved editing state.
     _subscriptions.add(domElement.onKeyUp.listen((event) {
       _handleChange(event);
     }));
@@ -650,7 +665,8 @@ class TextEditingElement {
   }) {
     assert(!isEnabled);
 
-    _initDomElement(inputConfig, onChange: onChange, onAction: onAction);
+    textEditingStrategy.initializeTextEditing(inputConfig,
+        onChange: onChange, onAction: onAction);
 
     textEditingStrategy.addEventHandlers();
 
@@ -661,15 +677,6 @@ class TextEditingElement {
     textEditingStrategy.setTextEditingState(editingState);
   }
 
-  void _initDomElement(
-    InputConfiguration inputConfig, {
-    @required _OnChangeCallback onChange,
-    @required _OnActionCallback onAction,
-  }) {
-    textEditingStrategy.initializeTextEditing(inputConfig,
-        onChange: onChange, onAction: onAction);
-  }
-
   void disableTextEditing() {
     textEditingStrategy.disableTextEditing();
   }

From f79499567ded4b7942646ce4d81b24c259952d78 Mon Sep 17 00:00:00 2001
From: Nurhan Turgut <nurhan@google.com>
Date: Wed, 11 Dec 2019 09:24:25 -0800
Subject: [PATCH 5/9] fixing persistenttextediting element which is used in
 a11y mode

---
 .../lib/src/engine/text_editing/text_editing.dart      | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index 8a2595f86f661..f0607c287a289 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -704,6 +704,12 @@ class TextEditingElement {
 /// semantic tree. It also requires that the DOM element remains in the tree
 /// when the user isn't editing.
 class PersistentTextEditingElement extends TextEditingElement {
+
+  final DefaultTextEditingStrategy defaultEditingStrategy =
+        AccesibiltyModeTextEditingStrategy();
+
+  html.Element get domElement => this.defaultEditingStrategy.domElement;
+
   /// Creates a [PersistentTextEditingElement] that eagerly instantiates
   /// [domElement] so the caller can insert it before calling
   /// [PersistentTextEditingElement.enable].
@@ -714,9 +720,7 @@ class PersistentTextEditingElement extends TextEditingElement {
     // TODO(yjbanov): move into initializer list when https://github.com/dart-lang/sdk/issues/37881 is fixed.
     assert((domElement is html.InputElement) ||
         (domElement is html.TextAreaElement));
-    DefaultTextEditingStrategy defaultEditingStrategy =
-        AccesibiltyModeTextEditingStrategy();
-    defaultEditingStrategy.domElement = domElement;
+    this.defaultEditingStrategy.domElement = domElement;
     this.textEditingStrategy = defaultEditingStrategy;
   }
 }

From 17e5951b615d1adabd35df3ae8e9c1615d6a0ec0 Mon Sep 17 00:00:00 2001
From: Nurhan Turgut <nurhan@google.com>
Date: Thu, 12 Dec 2019 08:05:39 -0800
Subject: [PATCH 6/9] removing texteditingelement and using texteditingstrategy
 from hybridtextediting. fixing the unit tests. fixing comments

---
 .../lib/src/engine/browser_detection.dart     |  15 +-
 .../src/engine/text_editing/text_editing.dart | 270 +++++++---------
 lib/web_ui/test/text_editing_test.dart        | 299 ++++++++++--------
 3 files changed, 303 insertions(+), 281 deletions(-)

diff --git a/lib/web_ui/lib/src/engine/browser_detection.dart b/lib/web_ui/lib/src/engine/browser_detection.dart
index 054b16e6be83b..3a4c1a4cbc305 100644
--- a/lib/web_ui/lib/src/engine/browser_detection.dart
+++ b/lib/web_ui/lib/src/engine/browser_detection.dart
@@ -29,10 +29,23 @@ enum BrowserEngine {
 /// Lazily initialized current browser engine.
 BrowserEngine _browserEngine;
 
+/// Override the value of [browserEngine].
+///
+/// Setting this to `null` lets [browserEngine] detect the browser that the
+/// app is running on.
+///
+/// This is intended to be used for testing and debugging only.
+BrowserEngine debugBrowserEngineOverride;
+
 /// Returns the [BrowserEngine] used by the current browser.
 ///
 /// This is used to implement browser-specific behavior.
-BrowserEngine get browserEngine => _browserEngine ??= _detectBrowserEngine();
+BrowserEngine get browserEngine {
+  if (debugBrowserEngineOverride != null) {
+    return debugBrowserEngineOverride;
+  }
+  return _browserEngine ??= _detectBrowserEngine();
+}
 
 BrowserEngine _detectBrowserEngine() {
   final String vendor = html.window.navigator.vendor;
diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index f0607c287a289..1391716a5a2ef 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -236,7 +236,7 @@ abstract class TextEditingStrategy {
 
   /// Register event listeners to the DOM element.
   ///
-  /// These event listener will be removed in [disableTextEditing].
+  /// These event listener will be removed in [disable].
   void addEventHandlers();
 
   /// Update the element's position.
@@ -250,7 +250,7 @@ abstract class TextEditingStrategy {
   /// This includes text and selection relelated states. The editing state will
   /// be updated everytime Flutter Framework sends 'TextInput.setEditingState'
   /// message.
-  void setTextEditingState(EditingState editingState);
+  void setEditingState(EditingState editingState);
 
   /// Set style to the native DOM element used for text editing.
   void updateElementStyle(_EditingStyle style);
@@ -258,11 +258,19 @@ abstract class TextEditingStrategy {
   /// Disables the element so it's no longer used for text editing.
   ///
   /// Calling [disable] also removes any registered event listeners.
-  void disableTextEditing();
+  void disable();
 }
 
 /// Class implementing the default editing strategies for text editing.
 ///
+/// This class uses a DOM element to provide text editing capabilities.
+///
+///  The backing DOM element could be one of:
+///
+/// 1. `<input>`.
+/// 2. `<textarea>`.
+/// 3. `<span contenteditable="true">`.
+///
 /// This class includes all the default behaviour for an editing element as
 /// well as the common properties such as [domElement].
 ///
@@ -272,6 +280,10 @@ abstract class TextEditingStrategy {
 /// Unless a formfactor/browser requires specific implementation for a specific
 /// strategy the methods in this class should be used.
 class DefaultTextEditingStrategy implements TextEditingStrategy {
+  final HybridTextEditing owner;
+
+  DefaultTextEditingStrategy(this.owner);
+
   @visibleForTesting
   bool isEnabled = false;
 
@@ -351,7 +363,7 @@ class DefaultTextEditingStrategy implements TextEditingStrategy {
   }
 
   @override
-  void disableTextEditing() {
+  void disable() {
     assert(isEnabled);
 
     isEnabled = false;
@@ -369,22 +381,16 @@ class DefaultTextEditingStrategy implements TextEditingStrategy {
 
   @mustCallSuper
   @override
-  void setTextEditingState(EditingState editingState) {
-    if (_lastEditingState != null) {
-      _lastEditingState = editingState;
-      if (!isEnabled || !editingState.isValid) {
-        return;
-      }
-
-      _lastEditingState.applyToDomElement(domElement);
-
-      // Re-focuses when setting editing state.
-      domElement.focus();
+  void setEditingState(EditingState editingState) {
+    _lastEditingState = editingState;
+    if (!isEnabled || !editingState.isValid) {
+      return;
     }
+    _lastEditingState.applyToDomElement(domElement);
   }
 
   void positionElement() {
-    _geometricInfo.applyToDomElement(domElement);
+    _geometricInfo?.applyToDomElement(domElement);
     domElement.focus();
   }
 
@@ -409,6 +415,33 @@ class DefaultTextEditingStrategy implements TextEditingStrategy {
       _onAction(_inputConfiguration.inputAction);
     }
   }
+
+  /// Enables the element so it can be used to edit text.
+  ///
+  /// Register [callback] so that it gets invoked whenever any change occurs in
+  /// the text editing element.
+  ///
+  /// Changes could be:
+  /// - Text changes, or
+  /// - Selection changes.
+  void enable(
+    InputConfiguration inputConfig, {
+    @required _OnChangeCallback onChange,
+    @required _OnActionCallback onAction,
+  }) {
+    assert(!isEnabled);
+
+    initializeTextEditing(inputConfig, onChange: onChange, onAction: onAction);
+
+    addEventHandlers();
+
+    if (_lastEditingState != null) {
+      setEditingState(this._lastEditingState);
+    }
+
+    // Re-focuses after setting editing state.
+    domElement.focus();
+  }
 }
 
 /// IOS/Safari behaviour for text editing.
@@ -419,12 +452,14 @@ class DefaultTextEditingStrategy implements TextEditingStrategy {
 /// Due to this [initializeElementPosition] and [updateElementPosition]
 /// strategies are different.
 ///
-/// [disableTextEditing] is also different since the [_positionInputElementTimer]
+/// [disable] is also different since the [_positionInputElementTimer]
 /// also needs to be cleaned.
 ///
 /// inputmodeAttribute needs to be set for mobile devices. Due to this
 /// [initializeTextEditing] is different.
 class IOSTextEditingStrategy extends DefaultTextEditingStrategy {
+  IOSTextEditingStrategy(HybridTextEditing owner) : super(owner);
+
   /// Timer that times when to set the location of the input text.
   ///
   /// This is only used for iOS. In iOS, virtual keyboard shifts the screen.
@@ -470,7 +505,6 @@ class IOSTextEditingStrategy extends DefaultTextEditingStrategy {
     /// Position the element outside of the page before focusing on it. This is
     /// useful for not triggering a scroll when iOS virtual keyboard is
     /// coming up.
-    /// See [TextEditingElement._delayBeforePositioning].
     domElement.style.transform = 'translate(-9999px, -9999px)';
 
     _canPosition = false;
@@ -503,8 +537,8 @@ class IOSTextEditingStrategy extends DefaultTextEditingStrategy {
   }
 
   @override
-  void disableTextEditing() {
-    super.disableTextEditing();
+  void disable() {
+    super.disable();
     _positionInputElementTimer?.cancel();
     _positionInputElementTimer = null;
   }
@@ -518,6 +552,8 @@ class IOSTextEditingStrategy extends DefaultTextEditingStrategy {
 /// Keyboard acts differently than other devices. [addEventHandlers] handles
 /// this case as an extra.
 class AndroidTextEditingStrategy extends DefaultTextEditingStrategy {
+  AndroidTextEditingStrategy(HybridTextEditing owner) : super(owner);
+
   @override
   void initializeTextEditing(
     InputConfiguration inputConfig, {
@@ -552,6 +588,8 @@ class AndroidTextEditingStrategy extends DefaultTextEditingStrategy {
 /// Selections are different in Firefox. [addEventHandlers] strategy is
 /// impelemented diefferently in Firefox.
 class FirefoxTextEditingStrategy extends DefaultTextEditingStrategy {
+  FirefoxTextEditingStrategy(HybridTextEditing owner) : super(owner);
+
   @override
   void addEventHandlers() {
     // Subscribe to text and selection changes.
@@ -585,13 +623,29 @@ class FirefoxTextEditingStrategy extends DefaultTextEditingStrategy {
 
 /// Text editing used by accesibilty mode.
 ///
-/// In accesibilty mode, the user of this class is supposed to insert and remove
-/// the [domElement] on their own. Due to this [initializeTextEditing],
-/// [initializeTextEditing] and [disableTextEditing] strategies are handled
-/// differently.
-class AccesibiltyModeTextEditingStrategy extends DefaultTextEditingStrategy {
+/// [PersistentTextEditingElement] assumes the caller will own the creation,
+/// insertion and disposal of the DOM element. Due to this
+/// [initializeElementPosition], [initializeTextEditing] and
+/// [disable] strategies are handled differently.
+///
+/// This class is still responsible for hooking up the DOM element with the
+/// [HybridTextEditing] instance so that changes are communicated to Flutter.
+class PersistentTextEditingElement extends DefaultTextEditingStrategy {
+  /// Creates a [PersistentTextEditingElement] that eagerly instantiates
+  /// [domElement] so the caller can insert it before calling
+  /// [PersistentTextEditingElement.enable].
+  PersistentTextEditingElement(
+      HybridTextEditing owner, html.HtmlElement domElement)
+      : super(owner) {
+    // Make sure the DOM element is of a type that we support for text editing.
+    // TODO(yjbanov): move into initializer list when https://github.com/dart-lang/sdk/issues/37881 is fixed.
+    assert((domElement is html.InputElement) ||
+        (domElement is html.TextAreaElement));
+    super.domElement = domElement;
+  }
+
   @override
-  void disableTextEditing() {
+  void disable() {
     // We don't want to remove the DOM element because the caller is responsible
     // for that.
     //
@@ -613,116 +667,21 @@ class AccesibiltyModeTextEditingStrategy extends DefaultTextEditingStrategy {
     // [domElement] on their own. Let's make sure they did.
     assert(domElement != null);
     assert(html.document.body.contains(domElement));
-  }
-}
-
-/// Wraps the DOM element used to provide text editing capabilities.
-///
-/// The backing DOM element could be one of:
-///
-/// 1. `<input>`.
-/// 2. `<textarea>`.
-/// 3. `<span contenteditable="true">`.
-class TextEditingElement {
-  /// Creates a non-persistent [TextEditingElement].
-  ///
-  /// See [TextEditingElement.persistent] to understand what persistent mode is.
-  TextEditingElement(this.owner) {
-    if (browserEngine == BrowserEngine.webkit &&
-        operatingSystem == OperatingSystem.iOs) {
-      this.textEditingStrategy = IOSTextEditingStrategy();
-    } else if (browserEngine == BrowserEngine.blink &&
-        operatingSystem == OperatingSystem.android) {
-      this.textEditingStrategy = AndroidTextEditingStrategy();
-    } else if (browserEngine == BrowserEngine.firefox) {
-      this.textEditingStrategy = FirefoxTextEditingStrategy();
-    } else {
-      this.textEditingStrategy = DefaultTextEditingStrategy();
-    }
-  }
-
-  TextEditingStrategy textEditingStrategy;
 
-  final HybridTextEditing owner;
-
-  @visibleForTesting
-  bool isEnabled = false;
-
-  EditingState _lastEditingState;
-
-  /// Enables the element so it can be used to edit text.
-  ///
-  /// Register [callback] so that it gets invoked whenever any change occurs in
-  /// the text editing element.
-  ///
-  /// Changes could be:
-  /// - Text changes, or
-  /// - Selection changes.
-  void enable(
-    InputConfiguration inputConfig, {
-    @required _OnChangeCallback onChange,
-    @required _OnActionCallback onAction,
-  }) {
-    assert(!isEnabled);
-
-    textEditingStrategy.initializeTextEditing(inputConfig,
-        onChange: onChange, onAction: onAction);
-
-    textEditingStrategy.addEventHandlers();
-
-    textEditingStrategy.setTextEditingState(this._lastEditingState);
+    isEnabled = true;
+    _inputConfiguration = inputConfig;
+    _onChange = onChange;
+    _onAction = onAction;
   }
 
+  @override
   void setEditingState(EditingState editingState) {
-    textEditingStrategy.setTextEditingState(editingState);
-  }
+    super.setEditingState(editingState);
 
-  void disableTextEditing() {
-    textEditingStrategy.disableTextEditing();
-  }
-
-  void setGeometricInfo(_GeometricInfo geometricInfo) {
-    textEditingStrategy.updateElementPosition(geometricInfo);
+    // Refocus after setting editing state.
+    domElement.focus();
   }
 
-  void setStyle(_EditingStyle style) {
-    textEditingStrategy.updateElementStyle(style);
-  }
-}
-
-/// The implementation of a persistent mode for [TextEditingElement].
-///
-/// Persistent mode assumes the caller will own the creation, insertion and
-/// disposal of the DOM element.
-///
-/// This class is still responsible for hooking up the DOM element with the
-/// [HybridTextEditing] instance so that changes are communicated to Flutter.
-///
-/// Persistent mode is useful for callers that want to have full control over
-/// the placement and lifecycle of the DOM element. An example of such a caller
-/// is Semantic's TextField that needs to put the DOM element inside the
-/// semantic tree. It also requires that the DOM element remains in the tree
-/// when the user isn't editing.
-class PersistentTextEditingElement extends TextEditingElement {
-
-  final DefaultTextEditingStrategy defaultEditingStrategy =
-        AccesibiltyModeTextEditingStrategy();
-
-  html.Element get domElement => this.defaultEditingStrategy.domElement;
-
-  /// Creates a [PersistentTextEditingElement] that eagerly instantiates
-  /// [domElement] so the caller can insert it before calling
-  /// [PersistentTextEditingElement.enable].
-  PersistentTextEditingElement(
-      HybridTextEditing owner, html.HtmlElement domElement)
-      : super(owner) {
-    // Make sure the DOM element is of a type that we support for text editing.
-    // TODO(yjbanov): move into initializer list when https://github.com/dart-lang/sdk/issues/37881 is fixed.
-    assert((domElement is html.InputElement) ||
-        (domElement is html.TextAreaElement));
-    this.defaultEditingStrategy.domElement = domElement;
-    this.textEditingStrategy = defaultEditingStrategy;
-  }
 }
 
 /// Text editing singleton.
@@ -737,22 +696,38 @@ final HybridTextEditing textEditing = HybridTextEditing();
 /// - HTML's contentEditable feature handles typing and text changes.
 /// - HTML's selection API handles selection changes and cursor movements.
 class HybridTextEditing {
-  /// The default HTML element used to manage editing state when a custom
-  /// element is not provided via [useCustomEditableElement].
-  TextEditingElement _defaultEditingElement;
+  /// The text editing stategy used. It can change depending on the
+  /// formfactor/browser.
+  ///
+  /// It uses an HTML element to manage editing state when a custom element is
+  /// not provided via [useCustomEditableElement]
+  DefaultTextEditingStrategy _defaultEditingElement;
 
   /// Private constructor so this class can be a singleton.
+  ///
+  /// The constructor also decides which text editing strategy to use depending
+  /// on the operating system and browser engine.
   HybridTextEditing() {
-    _defaultEditingElement = TextEditingElement(this);
+    if (browserEngine == BrowserEngine.webkit &&
+        operatingSystem == OperatingSystem.iOs) {
+      this._defaultEditingElement = IOSTextEditingStrategy(this);
+    } else if (browserEngine == BrowserEngine.blink &&
+        operatingSystem == OperatingSystem.android) {
+      this._defaultEditingElement = AndroidTextEditingStrategy(this);
+    } else if (browserEngine == BrowserEngine.firefox) {
+      this._defaultEditingElement = FirefoxTextEditingStrategy(this);
+    } else {
+      this._defaultEditingElement = DefaultTextEditingStrategy(this);
+    }
   }
 
   /// The HTML element used to manage editing state.
   ///
   /// This field is populated using [useCustomEditableElement]. If `null` the
-  /// [_defaultEditableElement] is used instead.
-  TextEditingElement _customEditingElement;
+  /// [_defaultEditingElement] is used instead.
+  DefaultTextEditingStrategy _customEditingElement;
 
-  TextEditingElement get editingElement {
+  DefaultTextEditingStrategy get editingElement {
     if (_customEditingElement != null) {
       return _customEditingElement;
     }
@@ -771,7 +746,8 @@ class HybridTextEditing {
   /// instead of the hidden default element.
   ///
   /// Use [stopUsingCustomEditableElement] to switch back to default element.
-  void useCustomEditableElement(TextEditingElement customEditingElement) {
+  void useCustomEditableElement(
+      DefaultTextEditingStrategy customEditingElement) {
     if (isEditing && customEditingElement != _customEditingElement) {
       stopEditing();
     }
@@ -821,11 +797,12 @@ class HybridTextEditing {
 
       case 'TextInput.setEditableSizeAndTransform':
         editingElement
-            .setGeometricInfo(_GeometricInfo.fromFlutter(call.arguments));
+            .updateElementPosition(_GeometricInfo.fromFlutter(call.arguments));
         break;
 
       case 'TextInput.setStyle':
-        editingElement.setStyle(_EditingStyle.fromFlutter(call.arguments));
+        editingElement
+            .updateElementStyle(_EditingStyle.fromFlutter(call.arguments));
         break;
 
       case 'TextInput.clearClient':
@@ -850,7 +827,7 @@ class HybridTextEditing {
   void stopEditing() {
     assert(isEditing);
     isEditing = false;
-    editingElement.disableTextEditing();
+    editingElement.disable();
   }
 
   void _syncEditingStateToFlutter(EditingState editingState) {
@@ -878,19 +855,6 @@ class HybridTextEditing {
       _emptyCallback,
     );
   }
-
-  // TODO(flutter_web): After the browser closes and re-opens the virtual
-  // shifts the page in iOS. Call this method from visibility change listener
-  // attached to body.
-  /// Set the DOM element's location somewhere outside of the screen.
-  ///
-  /// This is useful for not triggering a scroll when iOS virtual keyboard is
-  /// coming up.
-  ///
-  /// See [TextEditingElement._delayBeforePositioning].
-  void setStyleOutsideOfScreen(html.HtmlElement domElement) {
-    domElement.style.transform = 'translate(-9999px, -9999px)';
-  }
 }
 
 /// Information on the font and alignment of a text editing element.
diff --git a/lib/web_ui/test/text_editing_test.dart b/lib/web_ui/test/text_editing_test.dart
index 621747353486b..2cb7456a672f4 100644
--- a/lib/web_ui/test/text_editing_test.dart
+++ b/lib/web_ui/test/text_editing_test.dart
@@ -18,7 +18,7 @@ const int _kReturnKeyCode = 13;
 
 const MethodCodec codec = JSONMethodCodec();
 
-TextEditingElement editingElement;
+DefaultTextEditingStrategy editingElement;
 EditingState lastEditingState;
 String lastInputAction;
 
@@ -54,16 +54,13 @@ void main() {
     lastInputAction = null;
   });
 
-  group('$TextEditingElement', () {
+  group('$DefaultTextEditingStrategy', () {
     setUp(() {
-      editingElement = TextEditingElement(HybridTextEditing());
+      editingElement = DefaultTextEditingStrategy(HybridTextEditing());
     });
 
     tearDown(() {
-      if (editingElement.isEnabled) {
-        // Clean up all the DOM elements and event listeners.
-        editingElement.disable();
-      }
+      cleanTextEditingElement();
     });
 
     test('Creates element when enabled and removes it when disabled', () {
@@ -252,10 +249,6 @@ void main() {
           EditingState(text: 'bar\nbaz', baseOffset: 2, extentOffset: 7));
       checkTextAreaEditingState(textarea, 'bar\nbaz', 2, 7);
 
-      // Re-acquires focus.
-      textarea.blur();
-      expect(document.activeElement, textarea);
-
       editingElement.disable();
       // The textarea should be cleaned up.
       expect(document.getElementsByTagName('textarea'), hasLength(0));
@@ -355,145 +348,150 @@ void main() {
       // And default behavior of keyboard event shouldn't have been prevented.
       expect(event.defaultPrevented, isFalse);
     });
+  });
 
-    group('[persistent mode]', () {
-      test('Does not accept dom elements of a wrong type', () {
-        // A regular <span> shouldn't be accepted.
-        final HtmlElement span = SpanElement();
-        expect(
-          () => PersistentTextEditingElement(HybridTextEditing(), span),
-          throwsAssertionError,
-        );
-      });
+  group('$PersistentTextEditingElement', () {
+    InputElement testInputElement;
 
-      test('Does not re-acquire focus', () {
-        // See [PersistentTextEditingElement._refocus] for an explanation of why
-        // re-acquiring focus shouldn't happen in persistent mode.
-        final InputElement input = InputElement();
-        final PersistentTextEditingElement persistentEditingElement =
-            PersistentTextEditingElement(HybridTextEditing(), input);
-        expect(document.activeElement, document.body);
+    setUp(() {
+      testInputElement = InputElement();
+    });
 
-        document.body.append(input);
-        persistentEditingElement.enable(
-          singlelineConfig,
-          onChange: trackEditingState,
-          onAction: trackInputAction,
-        );
-        expect(document.activeElement, input);
+    tearDown(() {
+      cleanTextEditingElement();
+      testInputElement = null;
+    });
 
-        // The input should lose focus now.
-        persistentEditingElement.domElement.blur();
-        expect(document.activeElement, document.body);
+    test('Does not accept dom elements of a wrong type', () {
+      // A regular <span> shouldn't be accepted.
+      final HtmlElement span = SpanElement();
+      expect(
+        () => PersistentTextEditingElement(HybridTextEditing(), span),
+        throwsAssertionError,
+      );
+    });
 
-        persistentEditingElement.disable();
-      });
+    test('Does not re-acquire focus', () {
+      editingElement =
+          PersistentTextEditingElement(HybridTextEditing(), testInputElement);
 
-      test('Does not dispose and recreate dom elements in persistent mode', () {
-        final InputElement input = InputElement();
-        final PersistentTextEditingElement persistentEditingElement =
-            PersistentTextEditingElement(HybridTextEditing(), input);
+      expect(document.activeElement, document.body);
 
-        // The DOM element should've been eagerly created.
-        expect(input, isNotNull);
-        // But doesn't have focus.
-        expect(document.activeElement, document.body);
+      document.body.append(testInputElement);
+      editingElement.enable(
+        singlelineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+      expect(document.activeElement, testInputElement);
 
-        // Can't enable before the input element is inserted into the DOM.
-        expect(
-          () => persistentEditingElement.enable(
-            singlelineConfig,
-            onChange: trackEditingState,
-            onAction: trackInputAction,
-          ),
-          throwsAssertionError,
-        );
+      // The input should lose focus now.
+      editingElement.domElement.blur();
+      expect(document.activeElement, document.body);
 
-        document.body.append(input);
-        persistentEditingElement.enable(
-          singlelineConfig,
-          onChange: trackEditingState,
-          onAction: trackInputAction,
-        );
-        expect(document.activeElement, persistentEditingElement.domElement);
-        // It doesn't create a new DOM element.
-        expect(persistentEditingElement.domElement, input);
-
-        persistentEditingElement.disable();
-        // It doesn't remove the DOM element.
-        expect(persistentEditingElement.domElement, input);
-        expect(document.body.contains(persistentEditingElement.domElement),
-            isTrue);
-        // But the DOM element loses focus.
-        expect(document.activeElement, document.body);
-      });
+      editingElement.disable();
+    });
 
-      test('Refocuses when setting editing state', () {
-        final InputElement input = InputElement();
-        final PersistentTextEditingElement persistentEditingElement =
-            PersistentTextEditingElement(HybridTextEditing(), input);
+    test('Does not dispose and recreate dom elements in persistent mode', () {
+      editingElement =
+          PersistentTextEditingElement(HybridTextEditing(), testInputElement);
 
-        document.body.append(input);
-        persistentEditingElement.enable(
+      // The DOM element should've been eagerly created.
+      expect(testInputElement, isNotNull);
+      // But doesn't have focus.
+      expect(document.activeElement, document.body);
+
+      // Can't enable before the input element is inserted into the DOM.
+      expect(
+        () => editingElement.enable(
           singlelineConfig,
           onChange: trackEditingState,
           onAction: trackInputAction,
-        );
-        expect(document.activeElement, input);
+        ),
+        throwsAssertionError,
+      );
 
-        persistentEditingElement.domElement.blur();
-        expect(document.activeElement, document.body);
+      document.body.append(testInputElement);
+      editingElement.enable(
+        singlelineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+      expect(document.activeElement, editingElement.domElement);
+      // It doesn't create a new DOM element.
+      expect(editingElement.domElement, testInputElement);
 
-        // The input should regain focus now.
-        persistentEditingElement.setEditingState(EditingState(text: 'foo'));
-        expect(document.activeElement, input);
+      editingElement.disable();
+      // It doesn't remove the DOM element.
+      expect(editingElement.domElement, testInputElement);
+      expect(document.body.contains(editingElement.domElement), isTrue);
+      // But the DOM element loses focus.
+      expect(document.activeElement, document.body);
+    });
 
-        persistentEditingElement.disable();
-      });
+    test('Refocuses when setting editing state', () {
+      editingElement =
+          PersistentTextEditingElement(HybridTextEditing(), testInputElement);
 
-      test('Works in multi-line mode', () {
-        final TextAreaElement textarea = TextAreaElement();
-        final PersistentTextEditingElement persistentEditingElement =
-            PersistentTextEditingElement(HybridTextEditing(), textarea);
+      document.body.append(testInputElement);
+      editingElement.enable(
+        singlelineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+      expect(document.activeElement, testInputElement);
 
-        expect(persistentEditingElement.domElement, textarea);
-        expect(document.activeElement, document.body);
+      editingElement.domElement.blur();
+      expect(document.activeElement, document.body);
 
-        // Can't enable before the textarea is inserted into the DOM.
-        expect(
-          () => persistentEditingElement.enable(
-            singlelineConfig,
-            onChange: trackEditingState,
-            onAction: trackInputAction,
-          ),
-          throwsAssertionError,
-        );
+      // The input should regain focus now.
+      editingElement.setEditingState(EditingState(text: 'foo'));
+      expect(document.activeElement, testInputElement);
+
+      editingElement.disable();
+    });
+
+    test('Works in multi-line mode', () {
+      final TextAreaElement textarea = TextAreaElement();
+      editingElement =
+          PersistentTextEditingElement(HybridTextEditing(), textarea);
+
+      expect(editingElement.domElement, textarea);
+      expect(document.activeElement, document.body);
 
-        document.body.append(textarea);
-        persistentEditingElement.enable(
-          multilineConfig,
+      // Can't enable before the textarea is inserted into the DOM.
+      expect(
+        () => editingElement.enable(
+          singlelineConfig,
           onChange: trackEditingState,
           onAction: trackInputAction,
-        );
-        // Focuses the textarea.
-        expect(document.activeElement, textarea);
-
-        // Doesn't re-acquire focus.
-        textarea.blur();
-        expect(document.activeElement, document.body);
-
-        // Re-focuses when setting editing state
-        persistentEditingElement.setEditingState(EditingState(text: 'foo'));
-        expect(document.activeElement, textarea);
-
-        persistentEditingElement.disable();
-        // It doesn't remove the textarea from the DOM.
-        expect(persistentEditingElement.domElement, textarea);
-        expect(document.body.contains(persistentEditingElement.domElement),
-            isTrue);
-        // But the textarea loses focus.
-        expect(document.activeElement, document.body);
-      });
+        ),
+        throwsAssertionError,
+      );
+
+      document.body.append(textarea);
+      editingElement.enable(
+        multilineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+      // Focuses the textarea.
+      expect(document.activeElement, textarea);
+
+      // Doesn't re-acquire focus.
+      textarea.blur();
+      expect(document.activeElement, document.body);
+
+      // Re-focuses when setting editing state
+      editingElement.setEditingState(EditingState(text: 'foo'));
+      expect(document.activeElement, textarea);
+
+      editingElement.disable();
+      // It doesn't remove the textarea from the DOM.
+      expect(editingElement.domElement, textarea);
+      expect(document.body.contains(editingElement.domElement), isTrue);
+      // But the textarea loses focus.
+      expect(document.activeElement, document.body);
     });
   });
 
@@ -542,6 +540,8 @@ void main() {
 
     tearDown(() {
       spy.deactivate();
+      debugBrowserEngineOverride = null;
+      debugOperatingSystemOverride = null;
       if (textEditing.isEditing) {
         textEditing.stopEditing();
       }
@@ -990,6 +990,10 @@ void main() {
     test('sets correct input type in Android', () {
       debugOperatingSystemOverride = OperatingSystem.android;
 
+      /// During initialization [HybridTextEditing] will pick the correct
+      /// text editing strategy for [OperatingSystem.android].
+      textEditing = HybridTextEditing();
+
       showKeyboard(inputType: 'text');
       expect(getEditingInputMode(), 'text');
 
@@ -1012,6 +1016,11 @@ void main() {
 
     test('sets correct input type in iOS', () {
       debugOperatingSystemOverride = OperatingSystem.iOs;
+      debugBrowserEngineOverride = BrowserEngine.webkit;
+
+      /// During initialization [HybridTextEditing] will pick the correct
+      /// text editing strategy for [OperatingSystem.iOs].
+      textEditing = HybridTextEditing();
 
       showKeyboard(inputType: 'text');
       expect(getEditingInputMode(), 'text');
@@ -1079,6 +1088,19 @@ void main() {
   group('EditingState', () {
     EditingState _editingState;
 
+    setUp(() {
+      editingElement = DefaultTextEditingStrategy(HybridTextEditing());
+      editingElement.enable(
+        singlelineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+    });
+
+    tearDown(() {
+      cleanTextEditingElement();
+    });
+
     test('Configure input element from the editing state', () {
       final InputElement input = document.getElementsByTagName('input')[0];
       _editingState =
@@ -1092,6 +1114,13 @@ void main() {
     });
 
     test('Configure text area element from the editing state', () {
+      cleanTextEditingElement();
+      editingElement.enable(
+        multilineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+
       final TextAreaElement textArea =
           document.getElementsByTagName('textarea')[0];
       _editingState =
@@ -1118,6 +1147,13 @@ void main() {
     });
 
     test('Get Editing State from text area element', () {
+      cleanTextEditingElement();
+      editingElement.enable(
+        multilineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+
       final TextAreaElement input =
           document.getElementsByTagName('textarea')[0];
       input.value = 'Test';
@@ -1190,6 +1226,15 @@ MethodCall configureSetSizeAndTransformMethodCall(
   });
 }
 
+/// Will disable editing element which will also clean the backup DOM
+/// element from the page.
+void cleanTextEditingElement() {
+  if (editingElement.isEnabled) {
+    // Clean up all the DOM elements and event listeners.
+    editingElement.disable();
+  }
+}
+
 void checkInputEditingState(
     InputElement input, String text, int start, int end) {
   expect(document.activeElement, input);

From 38b37e2b64eed77e4c5b1231ccd4aff68db1ebc4 Mon Sep 17 00:00:00 2001
From: Nurhan Turgut <nurhan@google.com>
Date: Thu, 12 Dec 2019 08:13:15 -0800
Subject: [PATCH 7/9] fix unit tests

---
 lib/web_ui/test/text_editing_test.dart | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/lib/web_ui/test/text_editing_test.dart b/lib/web_ui/test/text_editing_test.dart
index 2cb7456a672f4..40813ead05341 100644
--- a/lib/web_ui/test/text_editing_test.dart
+++ b/lib/web_ui/test/text_editing_test.dart
@@ -201,23 +201,6 @@ void main() {
       expect(lastInputAction, isNull);
     });
 
-    test('Re-acquires focus', () async {
-      editingElement.enable(
-        singlelineConfig,
-        onChange: trackEditingState,
-        onAction: trackInputAction,
-      );
-      expect(document.activeElement, editingElement.domElement);
-
-      editingElement.domElement.blur();
-      // The focus remains on [editingElement.domElement].
-      expect(document.activeElement, editingElement.domElement);
-
-      // There should be no input action.
-      expect(lastInputAction, isNull);
-    }, // TODO(nurhan): https://github.com/flutter/flutter/issues/46638
-        skip: (browserEngine == BrowserEngine.firefox));
-
     test('Multi-line mode also works', () {
       // The textarea element is created lazily.
       expect(document.getElementsByTagName('textarea'), hasLength(0));

From 20bc4c0e934636315aeadbd213f6f4ed8acd141d Mon Sep 17 00:00:00 2001
From: Nurhan Turgut <nurhan@google.com>
Date: Thu, 12 Dec 2019 09:20:32 -0800
Subject: [PATCH 8/9] add todos for firefox tests

---
 lib/web_ui/test/text_editing_test.dart | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/lib/web_ui/test/text_editing_test.dart b/lib/web_ui/test/text_editing_test.dart
index 40813ead05341..125e80f777970 100644
--- a/lib/web_ui/test/text_editing_test.dart
+++ b/lib/web_ui/test/text_editing_test.dart
@@ -18,6 +18,9 @@ const int _kReturnKeyCode = 13;
 
 const MethodCodec codec = JSONMethodCodec();
 
+/// Add unit tests for [FirefoxTextEditingStrategy].
+/// TODO(nurhan): https://github.com/flutter/flutter/issues/46891
+
 DefaultTextEditingStrategy editingElement;
 EditingState lastEditingState;
 String lastInputAction;
@@ -995,7 +998,9 @@ void main() {
       hideKeyboard();
 
       debugOperatingSystemOverride = null;
-    });
+    },
+        // TODO(nurhan): https://github.com/flutter/flutter/issues/46638
+        skip: (browserEngine == BrowserEngine.firefox));
 
     test('sets correct input type in iOS', () {
       debugOperatingSystemOverride = OperatingSystem.iOs;
@@ -1023,7 +1028,9 @@ void main() {
       hideKeyboard();
 
       debugOperatingSystemOverride = null;
-    });
+    },
+        // TODO(nurhan): https://github.com/flutter/flutter/issues/46638
+        skip: (browserEngine == BrowserEngine.firefox));
 
     test('sends the correct input action as a platform message', () {
       final int clientId = showKeyboard(

From acceba49473aaf74cd29f892069a086f1ac0801a Mon Sep 17 00:00:00 2001
From: Nurhan Turgut <nurhan@google.com>
Date: Thu, 12 Dec 2019 10:41:38 -0800
Subject: [PATCH 9/9] fixing chrome/android a11y issue

---
 lib/web_ui/lib/src/engine/text_editing/text_editing.dart | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index 1391716a5a2ef..9c99621b78d36 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -672,6 +672,8 @@ class PersistentTextEditingElement extends DefaultTextEditingStrategy {
     _inputConfiguration = inputConfig;
     _onChange = onChange;
     _onAction = onAction;
+
+    domElement.focus();
   }
 
   @override