Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit b138fbc

Browse filesBrowse files
nicolas-grekasnicolas-grekas
committed
feature #34986 [Form] Added default inputmode attribute to Search, Email and Tel form types (fre5h)
This PR was squashed before being merged into the 5.1-dev branch. Discussion ---------- [Form] Added default `inputmode` attribute to Search, Email and Tel form types | Q | A | ------------- | --- | Branch? | master | Bug fix? | no | New feature? | yes | Deprecations? | no | Tickets | no | License | MIT | Doc PR | no There is an HTML5 attribute `inputmode`. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode It is supported by most of mobile browsers. There are such supported values for `inputmode`: * `none` * `text` (default value) * `decimal` * `numeric ` * `tel` * `search` * `email` * `url` The `url` inputmode is already implemented in UrlType https://github.com/symfony/symfony/blob/master/src/Symfony/Component/Form/Extension/Core/Type/UrlType.php#L39 I propose to add `tel`, `search`, `email` as default form view attribute to the relevant form types. Why only these three? `url` is already implemented, `none` makes no sense as default value for any form type, `text` is a default input type for any browser. `decimal` and `numeric` has different behaviour on iOS. iOS doesn't show `-` (minus) sign on keyboard for these input modes. Of course in cases, when only positive numbers are expected, it is normal. But it is not suitable as default value in Symfony form type. Developers can add this attribute manually in their forms, if they need only positive numbers. But `search`, `tel` and `email` input modes don't have problems and can be added as default attributes to Symfony form types. This will improve user experience, while using web-sites developed on Symfony on mobile devices. I add it into the *Type classes inside `buildView` method, so it will be possible to override this parameter if needed. If you are interested in how it looks like in mobile browsers, you can open this link https://inputmodes.com/ on you mobile device. Here are screenshots, how mobile keyboard looks like on Android and iOS with using `inputmode` attribute. ## `tel` inputmode ![image](https://user-images.githubusercontent.com/815865/70866507-45256480-1f73-11ea-9e82-320ef0b978ab.png) ## `email` inputmode ![image](https://user-images.githubusercontent.com/815865/70866502-3a6acf80-1f73-11ea-8f4c-3e7faca47f54.png) ## `search` inputmode ![image](https://user-images.githubusercontent.com/815865/70866498-2cb54a00-1f73-11ea-9fdc-2bb8abed107d.png) Commits ------- dbc500f [Form] Added default `inputmode` attribute to Search, Email and Tel form types
2 parents 40c2ce4 + dbc500f commit b138fbc
Copy full SHA for b138fbc

File tree

7 files changed

+143
-0
lines changed
Filter options

7 files changed

+143
-0
lines changed

‎src/Symfony/Component/Form/CHANGELOG.md

Copy file name to clipboardExpand all lines: src/Symfony/Component/Form/CHANGELOG.md
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
CHANGELOG
22
=========
33

4+
5.1.0
5+
-----
6+
7+
* Added default `inputmode` attribute to Search, Email and Tel form types.
8+
49
5.0.0
510
-----
611

‎src/Symfony/Component/Form/Extension/Core/Type/EmailType.php

Copy file name to clipboardExpand all lines: src/Symfony/Component/Form/Extension/Core/Type/EmailType.php
+10Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
namespace Symfony\Component\Form\Extension\Core\Type;
1313

1414
use Symfony\Component\Form\AbstractType;
15+
use Symfony\Component\Form\FormInterface;
16+
use Symfony\Component\Form\FormView;
1517

1618
class EmailType extends AbstractType
1719
{
@@ -23,6 +25,14 @@ public function getParent()
2325
return TextType::class;
2426
}
2527

28+
/**
29+
* {@inheritdoc}
30+
*/
31+
public function buildView(FormView $view, FormInterface $form, array $options)
32+
{
33+
$view->vars['attr']['inputmode'] = $options['attr']['inputmode'] ?? 'email';
34+
}
35+
2636
/**
2737
* {@inheritdoc}
2838
*/

‎src/Symfony/Component/Form/Extension/Core/Type/SearchType.php

Copy file name to clipboardExpand all lines: src/Symfony/Component/Form/Extension/Core/Type/SearchType.php
+10Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
namespace Symfony\Component\Form\Extension\Core\Type;
1313

1414
use Symfony\Component\Form\AbstractType;
15+
use Symfony\Component\Form\FormInterface;
16+
use Symfony\Component\Form\FormView;
1517

1618
class SearchType extends AbstractType
1719
{
@@ -23,6 +25,14 @@ public function getParent()
2325
return TextType::class;
2426
}
2527

28+
/**
29+
* {@inheritdoc}
30+
*/
31+
public function buildView(FormView $view, FormInterface $form, array $options)
32+
{
33+
$view->vars['attr']['inputmode'] = $options['attr']['inputmode'] ?? 'search';
34+
}
35+
2636
/**
2737
* {@inheritdoc}
2838
*/

‎src/Symfony/Component/Form/Extension/Core/Type/TelType.php

Copy file name to clipboardExpand all lines: src/Symfony/Component/Form/Extension/Core/Type/TelType.php
+10Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
namespace Symfony\Component\Form\Extension\Core\Type;
1313

1414
use Symfony\Component\Form\AbstractType;
15+
use Symfony\Component\Form\FormInterface;
16+
use Symfony\Component\Form\FormView;
1517

1618
class TelType extends AbstractType
1719
{
@@ -23,6 +25,14 @@ public function getParent()
2325
return TextType::class;
2426
}
2527

28+
/**
29+
* {@inheritdoc}
30+
*/
31+
public function buildView(FormView $view, FormInterface $form, array $options)
32+
{
33+
$view->vars['attr']['inputmode'] = $options['attr']['inputmode'] ?? 'tel';
34+
}
35+
2636
/**
2737
* {@inheritdoc}
2838
*/

‎src/Symfony/Component/Form/Tests/Extension/Core/Type/EmailTypeTest.php

Copy file name to clipboard
+36Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <fabien@symfony.com>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace Symfony\Component\Form\Tests\Extension\Core\Type;
13+
14+
class EmailTypeTest extends BaseTypeTest
15+
{
16+
const TESTED_TYPE = 'Symfony\Component\Form\Extension\Core\Type\EmailType';
17+
18+
public function testDefaultInputmode()
19+
{
20+
$form = $this->factory->create(static::TESTED_TYPE);
21+
22+
$this->assertSame('email', $form->createView()->vars['attr']['inputmode']);
23+
}
24+
25+
public function testOverwrittenInputmode()
26+
{
27+
$form = $this->factory->create(static::TESTED_TYPE, null, ['attr' => ['inputmode' => 'text']]);
28+
29+
$this->assertSame('text', $form->createView()->vars['attr']['inputmode']);
30+
}
31+
32+
public function testSubmitNull($expected = null, $norm = null, $view = null)
33+
{
34+
parent::testSubmitNull($expected, $norm, '');
35+
}
36+
}

‎src/Symfony/Component/Form/Tests/Extension/Core/Type/SearchTypeTest.php

Copy file name to clipboard
+36Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <fabien@symfony.com>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace Symfony\Component\Form\Tests\Extension\Core\Type;
13+
14+
class SearchTypeTest extends BaseTypeTest
15+
{
16+
const TESTED_TYPE = 'Symfony\Component\Form\Extension\Core\Type\SearchType';
17+
18+
public function testDefaultInputmode()
19+
{
20+
$form = $this->factory->create(static::TESTED_TYPE);
21+
22+
$this->assertSame('search', $form->createView()->vars['attr']['inputmode']);
23+
}
24+
25+
public function testOverwrittenInputmode()
26+
{
27+
$form = $this->factory->create(static::TESTED_TYPE, null, ['attr' => ['inputmode' => 'text']]);
28+
29+
$this->assertSame('text', $form->createView()->vars['attr']['inputmode']);
30+
}
31+
32+
public function testSubmitNull($expected = null, $norm = null, $view = null)
33+
{
34+
parent::testSubmitNull($expected, $norm, '');
35+
}
36+
}

‎src/Symfony/Component/Form/Tests/Extension/Core/Type/TelTypeTest.php

Copy file name to clipboard
+36Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <fabien@symfony.com>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace Symfony\Component\Form\Tests\Extension\Core\Type;
13+
14+
class TelTypeTest extends BaseTypeTest
15+
{
16+
const TESTED_TYPE = 'Symfony\Component\Form\Extension\Core\Type\TelType';
17+
18+
public function testDefaultInputmode()
19+
{
20+
$form = $this->factory->create(static::TESTED_TYPE);
21+
22+
$this->assertSame('tel', $form->createView()->vars['attr']['inputmode']);
23+
}
24+
25+
public function testOverwrittenInputmode()
26+
{
27+
$form = $this->factory->create(static::TESTED_TYPE, null, ['attr' => ['inputmode' => 'text']]);
28+
29+
$this->assertSame('text', $form->createView()->vars['attr']['inputmode']);
30+
}
31+
32+
public function testSubmitNull($expected = null, $norm = null, $view = null)
33+
{
34+
parent::testSubmitNull($expected, $norm, '');
35+
}
36+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.