The UrlType renders an <input type = "text" /> instead of an <input type = "url" />

[iraldoad]

Symfony version(s) affected: 3.4.22

Description
The Url Type renders an instead of an so this field is not validated in Google Chrome.

[xabbuh]

Which Symfony version do you use? How is your form configured?

[ro0NL]

Related to #29926?

[iraldoad]

Hi. Sorry for the delay when responding. This is the field:

$builder->add('url', UrlType::class, [
                'default_protocol' => 'https',
                'required' => false,
                'attr' => [
                    'class' => 'form-control',
                    'placeholder' => 'https://domain.com',
                    'pattern' => '^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$'
                ]
            ])

As you can see I had to add a pattern to validate the url. This is the HTML:

<input type="text" name="entity[url]" class="form-control" placeholder="https://domain.com" pattern="^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$" inputmode="url">

[iraldoad]

[ro0NL]

#29926 is released in 3.4.22, looks like you received a bugfix 😅

(because of default_protocol the input should allow for protocol-less values, hence type text in this case)

[xabbuh]

As @ro0NL explained this is the expected behaviour. So I'm going to close here. Thank you for understanding.

[iraldoad]

As I understand, if I remove the default protocol option should I render the input to url type?

[xabbuh]

If you remove the option, the type will be rendered as a url input type.

Edit: The option needs to be set to null explicitly as its default value is http.

[iraldoad]

Well no, it continues to be rendered in the same way.

[xabbuh]

Can you create a example application that allows to reproduce your problem?

[iraldoad]

I have created a project but I have not been able to prove it. Use the crud generator and do not open the form page. Initially he sent me the following error "Maximum function nesting level of '256' reached, aborting! stackoverflow". Afterwards no longer.
This is the link: https://github.com/iraldoad/my_project.git

[xabbuh]

When adding the url type in the buildForm() method of your custom UrlType, you do not reference theUrlType from the Form component, but again add your own UrlType which creates a recursion (see https://github.com/iraldoad/my_project/pull/1). And then you need to explicitly set default_protocol to null as its default value is http (I have corrected by comment above):

$builder->add('url', CoreUrlType::class, ['default_protocol' => null]);

[iraldoad]

Great. Ok thanks.