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

Support decimal information on the TextInputType #19664

Merged
merged 2 commits into from
Jul 13, 2020
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
21 changes: 18 additions & 3 deletions lib/web_ui/lib/src/engine/text_editing/input_type.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.


part of engine;

/// Various types of inputs used in text fields.
Expand All @@ -14,10 +13,10 @@ part of engine;
abstract class EngineInputType {
const EngineInputType();

static EngineInputType fromName(String name) {
static EngineInputType fromName(String name, {bool isDecimal = false}) {
switch (name) {
case 'TextInputType.number':
return number;
return isDecimal ? decimal : number;
case 'TextInputType.phone':
return phone;
case 'TextInputType.emailAddress':
Expand All @@ -38,6 +37,9 @@ abstract class EngineInputType {
/// Numeric input type.
static const NumberInputType number = NumberInputType();

/// Decimal input type.
static const DecimalInputType decimal = DecimalInputType();

/// Phone number input type.
static const PhoneInputType phone = PhoneInputType();

Expand Down Expand Up @@ -89,13 +91,26 @@ class TextInputType extends EngineInputType {
}

/// Numeric input type.
///
/// Input keyboard with only the digits 0–9.
class NumberInputType extends EngineInputType {
const NumberInputType();

@override
final String inputmodeAttribute = 'numeric';
}

/// Decimal input type.
///
/// Input keyboard with containing the digits 0–9 and a decimal separator.
/// Seperator can be `.`, `,` depending on the locale.
class DecimalInputType extends EngineInputType {
const DecimalInputType();

@override
final String inputmodeAttribute = 'decimal';
}

/// Phone number input type.
class PhoneInputType extends EngineInputType {
const PhoneInputType();
Expand Down
4 changes: 3 additions & 1 deletion lib/web_ui/lib/src/engine/text_editing/text_editing.dart
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,9 @@ class InputConfiguration {
InputConfiguration.fromFrameworkMessage(
Map<String, dynamic> flutterInputConfiguration)
: inputType = EngineInputType.fromName(
flutterInputConfiguration['inputType']['name']),
flutterInputConfiguration['inputType']['name'],
isDecimal:
flutterInputConfiguration['inputType']['decimal'] ?? false),
inputAction = flutterInputConfiguration['inputAction'],
obscureText = flutterInputConfiguration['obscureText'],
autocorrect = flutterInputConfiguration['autocorrect'],
Expand Down
61 changes: 38 additions & 23 deletions lib/web_ui/test/text_editing_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -572,12 +572,14 @@ void main() {
/// the keyboard.
///
/// Returns the `clientId` used in the platform message.
int showKeyboard({String inputType, String inputAction}) {
int showKeyboard(
{String inputType, String inputAction, bool decimal = false}) {
final MethodCall setClient = MethodCall(
'TextInput.setClient',
<dynamic>[
++clientId,
createFlutterConfig(inputType, inputAction: inputAction),
createFlutterConfig(inputType,
inputAction: inputAction, decimal: decimal),
],
);
sendFrameworkMessage(codec.encodeMethodCall(setClient));
Expand Down Expand Up @@ -867,8 +869,7 @@ void main() {
expect(document.getElementsByTagName('form'), isEmpty);
});

test(
'No capitilization: setClient, setEditingState, show', () {
test('No capitilization: setClient, setEditingState, show', () {
// Create a configuration with an AutofillGroup of four text fields.
final Map<String, dynamic> capitilizeWordsConfig = createFlutterConfig(
'text',
Expand Down Expand Up @@ -908,8 +909,7 @@ void main() {
hideKeyboard();
});

test(
'All characters capitilization: setClient, setEditingState, show', () {
test('All characters capitilization: setClient, setEditingState, show', () {
// Create a configuration with an AutofillGroup of four text fields.
final Map<String, dynamic> capitilizeWordsConfig = createFlutterConfig(
'text',
Expand Down Expand Up @@ -1356,6 +1356,12 @@ void main() {
showKeyboard(inputType: 'number');
expect(getEditingInputMode(), 'numeric');

showKeyboard(inputType: 'number', decimal: false);
expect(getEditingInputMode(), 'numeric');

showKeyboard(inputType: 'number', decimal: true);
expect(getEditingInputMode(), 'decimal');

showKeyboard(inputType: 'phone');
expect(getEditingInputMode(), 'tel');

Expand All @@ -1369,29 +1375,36 @@ void main() {
});

test('sets correct input type in iOS', () {
debugOperatingSystemOverride = OperatingSystem.iOs;
debugBrowserEngineOverride = BrowserEngine.webkit;
// Test on ios-safari only.
if (browserEngine == BrowserEngine.webkit &&
operatingSystem == OperatingSystem.iOs) {
/// During initialization [HybridTextEditing] will pick the correct
/// text editing strategy for [OperatingSystem.iOs].
textEditing = HybridTextEditing();

/// During initialization [HybridTextEditing] will pick the correct
/// text editing strategy for [OperatingSystem.iOs].
textEditing = HybridTextEditing();
showKeyboard(inputType: 'text');
expect(getEditingInputMode(), 'text');

showKeyboard(inputType: 'text');
expect(getEditingInputMode(), 'text');
showKeyboard(inputType: 'number');
expect(getEditingInputMode(), 'numeric');

showKeyboard(inputType: 'number');
expect(getEditingInputMode(), 'numeric');
showKeyboard(inputType: 'number', decimal: false);
expect(getEditingInputMode(), 'numeric');

showKeyboard(inputType: 'phone');
expect(getEditingInputMode(), 'tel');
showKeyboard(inputType: 'number', decimal: true);
expect(getEditingInputMode(), 'decimal');

showKeyboard(inputType: 'emailAddress');
expect(getEditingInputMode(), 'email');
showKeyboard(inputType: 'phone');
expect(getEditingInputMode(), 'tel');

showKeyboard(inputType: 'url');
expect(getEditingInputMode(), 'url');
showKeyboard(inputType: 'emailAddress');
expect(getEditingInputMode(), 'email');

hideKeyboard();
showKeyboard(inputType: 'url');
expect(getEditingInputMode(), 'url');

hideKeyboard();
}
});

test('sends the correct input action as a platform message', () {
Expand Down Expand Up @@ -1798,10 +1811,12 @@ Map<String, dynamic> createFlutterConfig(
String inputAction,
String autofillHint,
List<String> autofillHintsForFields,
bool decimal = false,
}) {
return <String, dynamic>{
'inputType': <String, String>{
'inputType': <String, dynamic>{
'name': 'TextInputType.$inputType',
if (decimal) 'decimal': true,
},
'obscureText': obscureText,
'autocorrect': autocorrect,
Expand Down