Embedded Language Selector with "Select Box" template throws "Uncaught TypeError: Cannot read property 'attr' of null" when switching language

Issue

When embedding the Language Selector in the theme or a layout template and setting it to have "Select Box" template in the portlet's Configuration settings, the below error will be thrown in the browser's console upon switching the language:

combo?browserId=othe…get-position.js:173 Uncaught TypeError: Cannot read property 'attr' of null
    at Object._defaultSubmitFormFn (combo?browserId=othe…get-position.js:173)
    at Y.CustomEvent.CEProto.fireComplex (combo?browserId=othe…mousewheel.js:539)
    at Y.CustomEvent._fire (combo?browserId=othe…t-mousewheel.js:512)
    at Object.fire (combo?browserId=othe…t-mousewheel.js:530)
    at combo?browserId=othe…get-position.js:227
    at Object._proxy (combo?browserId=othe…get-position.js:141)
    at combo?browserId=othe…ui-base-core.js:152
    at args.<computed> (combo?browserId=othe…t-mousewheel.js:373)
    at YUI._notify (combo?browserId=othe…nt-mousewheel.js:71)
    at combo?browserId=othe…nt-mousewheel.js:70

eventually, the language won't switch as expected.

Environment

Liferay DXP 7.0+

Resolution

Make sure the portlet's instanceId has not a static value in the embedding code.

A code like this will cause the issue:

<@liferay_portlet["runtime"]
  instanceId="01"
  portletProviderAction=portletProviderAction.VIEW
  portletProviderClassName="com.liferay.portal.kernel.servlet.taglib.ui.LanguageEntry"
/>

The issue will no longer occur when giving the instanceId a dynamic value, for example:

<@liferay_portlet["runtime"]
  instanceId="FOOTER${plid}"
  portletProviderAction=portletProviderAction.VIEW
  portletProviderClassName="com.liferay.portal.kernel.servlet.taglib.ui.LanguageEntry"
/>