[Bug]: Label animations in shadowRoot not working #329
Description
Before submitting...
- I have searched for duplicate or closed issues.
- I have read the CONTRIBUTING document and my issue is following the guidelines.
- I have read the template completely before filling it in.
Context
Hello there,
First: Thanks for this awesome library.
Second:
The label animations are not working if loaded in shadowRoot, even if delegatesFocus is enabled.
I opened a thread on stackoverflow with the code snippets showing the actual issue.
This CodePen contains the Bug.
This CodePen is for version 2.0.1
This CodePen contains my current workaround.
And this CodePen basically shows what i am trying to achieve as web component.
I think this might be a scoping problem, but i am not quite sure, because i don't really know the source code of this generally really awesome library.
If i can help fixing this: Best chances of contacting me are on stackoverflow or by responding here.
Kind regards,
Canabale
Current Behavior
The focus handling in shadowRoot components does currently not work correctly.
Therefore labels will not move, when entering an input element.
Expected behavior
Materialize in shadowRoot should work the same as in the html document itself.
Possible Solutions or Causes
The issue might be that the query selectors in materialize do not out the box query document fragments in shadowRoot.
This CodePen contains my current workaround.
Steps to reproduce
This CodePen contains the Bug.
This CodePen contains my current workaround.
And this CodePen basically shows what i am trying to achieve as web component.
Your Environment
- Version used: 1.0.0
- Browser Name and version: Latest Edge/Chrome/Firefox
- Operating System and version (desktop or mobile): Windows 10, Windows 11, Android 12
- Additional information you want to tell us: Yes i really tested all those browsers on the different devices...