Clarity: 3.0.0-next.6 - use of native datalist tag causes errors

[Ergnos]

Describe the bug

When <datalist></datalist> is used without defining a <clr-datalist-container> it throws the following error:

ERROR NullInjectorError: StaticInjectorError(AppModule)[ClrDatalist -> DatalistIdService]: 
  StaticInjectorError(Platform: core)[ClrDatalist -> DatalistIdService]: 
    NullInjectorError: No provider for DatalistIdService!

How to reproduce

Steps to reproduce the behavior:

1. Go to Stackblitz
2. Open console to see the error details

Expected behavior

DatalistIdService should not be called when a <datalist> tag is defined without the <clr-datalist-container>

Versions

App

• Angular: [8.2.9]
• Clarity: [3.0.0-next.6]

Device:

• Type: [PC]
• OS: [windows 10]
• Browser [chrome]
• Version [79.0.3945.117]

Additional notes

_Add any other notes about the problem here._

[hippee-lee]

DatalistIdService is provided by the clr-datalist-container. Your working example in the stackblitz is the correct way to use this component.

Closing as this is an implementation question and not an issue.

[Ergnos]

DatalistIdService is provided by the clr-datalist-container.

That is true, but when we wish to use datalist input as a native html element or in another type of component (not as a clarity-datalist and therefore, without the clr-datalist-container) it breaks the application since it looks for a DatalistIdService . In the stackblitz the native input with datalist is shown, not the clarity one since the error is occured on the native datalist.

As reference: if a native html select is used, without the clarity directive on the input and without the clr-select-container it does not break the application. The native select and clarity-select can be used interchangeably .

[gnomeontherun]

We should guard against this a little better, at least throw an exception to explain it (as we do with passwords) or handle it gracefully.

[skipgeldens]

I think that overriding the HTML5-default 'datalist' selector is causing this: https://github.com/vmware/clarity/blob/d087d40e623bd472e397e5374e6e4ecf02507b11/src/clr-angular/forms/datalist/datalist.ts#L13 .

Is it possible to check if the 'datalist' selector is used inside of the <clr-datalist-container>?

[gnomeontherun]

The selector should stay, but we need to basically make the directive inert unless its inside the container (which we can detect). Should be a small fix.

[hippee-lee]

I'll fix it this week and submit a PR with @ Optional on the service and then add a check for the service before setting the id. Should be pretty simple. (I know, I know, those are famous last words but this is not the datagrid :) )

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.