lion-input-date validation issue

[rileymacisaac]

Expected behavior

I expect lion-input-date to provide the default validation for that field (IsDate), and provide the default error message like other fields.

Actual Behavior

When including lion-input-date, it asks me to configure a message via static async getMessage(). If I add new IsDate() as a validator to lion-input, it works perfectly. But lion-input-date by it self does not show the validation message.

I'm using lion in html/njk, not via JS, so I can reliably do conditional output with data from my CMS.

My code:

<!-- This is actually loaded in a js file, not inline -->
<script type="module">
import "@webcomponents/scoped-custom-element-registry";
import "@lion/form/define";
import "@lion/button/define";
import { loadDefaultFeedbackMessages } from "@lion/validate-messages";
loadDefaultFeedbackMessages();

import { LionInput } from '@lion/input';
import { LionSelect } from '@lion/select';
import { LionInputDate } from '@lion/input-date';
import { LionInputEmail } from '@lion/input-email';
customElements.define('etc-input', LionInput);
customElements.define('etc-select', LionSelect);
customElements.define('etc-input-date', LionInputDate);
customElements.define('etc-input-email', LionInputEmail);

</script>

<lion-form>
   <form name="apply-for-a-program" class="box-flex direction-col" method="POST" onsubmit="this._submit()"">
      <etc-select name="program" label="Program" required="""></etc-select>
      <etc-input name="first-name" label="First name"></etc-input>
      <etc-input-email name="email-address" label="Email address"></etc-input-email>
      <etc-input-date name="date-of-birth" label="Date of birth"></etc-input-date>
      <lion-button-submit>Send message</lion-button-submit>
   </form>
</lion-form>

Edit/update

If I copy/paste the contents of LionInputDate.js into my file and define the custom element there, everything works as intended. Obviously this isn't ideal though.

[rileymacisaac]

I should mention that this also happens on the Input date documentation

[shamsartem]

This also happens with regular input. For me loadDefaultFeedbackMessages does nothing Also reproducible in docs simulation for Required validator https://lion-web.netlify.app/simulator/#?story-file=9774c992&story-key=requiredValidator&theme=light&platform=web&language=en-US&edge-distance=true