Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

Fix iOS safari keyboard issue when semantics is enabled #38822

Merged
nbayati merged 5 commits into from
Jan 18, 2023
Merged

Fix iOS safari keyboard issue when semantics is enabled #38822

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f5178f2
Update branch with changes in main - Fix iOS safari keyboard issue wh…
nbayati Jan 12, 2023
c4380da
Update branch with main - small enhancements
nbayati Jan 13, 2023
0514a21
set offset to -9999px instead of -999
nbayati Jan 13, 2023
ef4b6da
Add editing state tests to ios
nbayati Jan 18, 2023
2b2abdb
replace editableElement with the null checked one
nbayati Jan 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
set offset to -9999px instead of -999
  • Loading branch information
@nbayati
nbayati committed Jan 18, 2023
commit 0514a214ae1807d1675e6ee6e91c139c54db0ebe
2 changes: 1 addition & 1 deletion lib/web_ui/lib/src/engine/semantics/text_field.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,7 @@ class TextField extends RoleManager {
}

_initializeEditableElement();
activeEditableElement.style.transform = 'translate(-999px,-999px)';
activeEditableElement.style.transform = 'translate(${offScreenOffset}px, ${offScreenOffset}px)';
_positionInputElementTimer?.cancel();
_positionInputElementTimer = Timer(_delayBeforePlacement, () {
editableElement?.style.transform = '';
Copy link
Contributor

@yjbanov yjbanov Jan 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to null out _positionInputElementTimer when it fires to avoid having a stale timer object lurking in the system.

Copy link
Contributor Author

@nbayati nbayati Jan 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! Done!

Expand Down
9 changes: 6 additions & 3 deletions lib/web_ui/lib/src/engine/text_editing/text_editing.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ bool _debugPrintTextInputCommands = false;
/// The `keyCode` of the "Enter" key.
const int _kReturnKeyCode = 13;

/// Offset in pixels to place an element outside of the screen.
const int offScreenOffset = -9999;

/// Blink and Webkit engines, bring an overlay on top of the text field when it
/// is autofilled.
bool browserHasAutofillOverlay() =>
Expand Down Expand Up @@ -119,8 +122,8 @@ void _hideAutofillElements(DomHTMLElement domElement,

if (isOffScreen) {
elementStyle
..top = '-9999px'
..left = '-9999px';
..top = '${offScreenOffset}px'
..left = '${offScreenOffset}px';
}

if (browserHasAutofillOverlay()) {
Expand Down Expand Up @@ -1509,7 +1512,7 @@ class IOSTextEditingStrategy extends GloballyPositionedTextEditingStrategy {
/// 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.
activeDomElement.style.transform = 'translate(-9999px, -9999px)';
activeDomElement.style.transform = 'translate(${offScreenOffset}px, ${offScreenOffset}px)';

_canPosition = false;
}
Expand Down
5 changes: 3 additions & 2 deletions lib/web_ui/test/engine/semantics/text_field_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -776,8 +776,9 @@ void testMain() {
value: 'hello',
isFocused: true,
);
expect(strategy.activeDomElement.style.transform, 'translate(-999px, -999px)');
await Future<void>.delayed(const Duration(milliseconds: 201) , (){});
expect(strategy.activeDomElement.style.transform, 'translate(${offScreenOffset}px, ${offScreenOffset}px)');
// See [_delayBeforePlacement].
await Future<void>.delayed(const Duration(milliseconds: 120) , (){});
expect(strategy.activeDomElement.style.transform, '');
});

Expand Down