MessageList breaks when using Locale Variants [1 DAY]

[marcobsidian]

Description

The JS of vaadin-message-list uses the ISO-Code of the current UI-Locale in Intl.DateTimeFormat.
This breaks when using custom Locale variants.

The component does not render at all and the following error is logged in the browser console:

Uncaught (in promise) RangeError: Invalid language tag: de-de-x-lvariant-hw
    at new DateTimeFormat (<anonymous>)
    at formatItems (generated-flow-imports-D9DsWzDG.js:196318:21)
    at Object.setItems (generated-flow-imports-D9DsWzDG.js:196336:19)
    at MessageList.eval (eval at zu (FlowClient-DroGq_LA.js:7491:13), <anonymous>:3:68)

Cause of the error is the following code:

flow-components/vaadin-messages-flow-parent/vaadin-messages-flow/src/main/resources/META-INF/resources/frontend/messageListConnector.js

Lines 17 to 36 in d7681ff

	/**
	* Maps the given items to a new array of items with formatted time.
	*/
	function formatItems(items, locale) {
	const formatter = new Intl.DateTimeFormat(locale, {
	year: 'numeric',
	month: 'short',
	day: 'numeric',
	hour: 'numeric',
	minute: 'numeric'
	});
	return items.map((item) =>
	item.time
	? Object.assign(item, {
	time: formatter.format(new Date(item.time))
	})
	: item
	);
	}

Note

Context: Our App uses Locale Variants to supply customer-individual Externalization via Resource Bundles

Expected outcome

Language variants do not cause the rendering of the MessageList to fail

Both of the following behaviors would be fine for our use case:

• Locale Variants are completely ignored by the Message List and the base Locale (de-DE) is always used
• The base Locale (de-DE) is used as a fallback when Intl.DateTimeFormat cannot handle the ISO-Code

Minimal reproducible example

package com.marcobsidian.vaadin.views.helloworld;

import java.time.Instant;
import java.util.Locale;

import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.component.messages.MessageListItem;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteAlias;

@PageTitle("Hello World")
@Route(value = "helloworld")
@RouteAlias(value = "")
public class HelloWorldView extends VerticalLayout {

    // German with customer dependent Locale variant.
    // In prod, we already set this at UI init or when the user changes the app language
    private static final Locale APP_LOCALE = new Locale("de", "DE", "hw");

    public HelloWorldView() {
        UI.getCurrent().setLocale(APP_LOCALE);

        var messageList = new MessageList();
        messageList.setSizeFull();
        messageList.setItems(new MessageListItem("Hello World", Instant.now(), "World Greeter"));
        add(messageList);
    }

}

Steps to reproduce

1. Open http://localhost:8080/helloworld, MessageList does not render

2. Open Chrome DevTools Console

Environment

Vaadin version(s): 24
OS: Windows 11

Browsers

Issue is not browser related

[DiegoCardoso]

This seems to be actually browser-related:

Chrome seems to be more strict or supports fewer variants compared to, e.g., Firefox or Safari, as the same code doesn't fail running in the latter:

Calling Intl.DateTimeFormat.supportedLocalesOf with the parsed tag produces the same error in Chrome:

While it doesn't in Firefox:

... and Safari:

It could be that, effectively, Firefox and Safari are just ignoring the variant part, and gracefully fall back to de-DE in this case.