JS Error Backend if id="main" is not present

[xprojects-de]

Affected version(s)

4.13

Description

Hello,

i don´t really know if it´s a bug but rendering a custom Twig-BackendTemplate using the AbstractBackendController the core.js always always expects a div with id="main"

Error:

Uncaught TypeError: document.id(...) is null

So if you use a template such as

{% extends "@Contao/be_main" %}
{% block main %}
<div id="foor"></div>
{% endblock %}

the error occurs.

I think that you don't necessarily have to have the main with your own controller, do you?

Greetings

[xprojects-de]

... I just see that the error does not occur under 5.x!

In 4.13 the correct way would be as follows:

{% extends "@ContaoCore/Backend/be_page.html.twig" %}

It only matters if you want to keep the extension for 4.13 and 5.0. So I don't know if this should be fixed!! But it would just be easier to support both versions.

[fritzmg]

It's probably caused by the Backend.autoFocusFirstInputField method.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ausi]

It's probably caused by the Backend.autoFocusFirstInputField method.

In this case we could simply change https://github.com/contao/contao/blob/5e17a4acbc0370e8c956f2d3f8db94d4e9648cbb/core-bundle/src/Resources/public/core.js#L2700 to something like:

var edit = $(document.querySelector('#main .tl_formbody_edit'));

[leofeyer]

Why did you wrap the document.querySelector() call with $()?

[ausi]

Why did you wrap the document.querySelector() call with $()?

Because it is used as a mootools element further down and $() ensures that all the mootools methods are available on that element. But this is only needed for Internet Explorer AFIAK, so we could probably get rid of it.