[Bug]: Label animations in shadowRoot not working

Question

[Bug]: Label animations in shadowRoot not working

Canabale opened this issue a year ago · comments

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...

Danish Hakim · Answer 1 · Tue Feb 07 2023 01:06:18 GMT+0800 (China Standard Time)

Hi, @Canabale. I see that in the codepen, that you’re still using the old version of materialize! Could you try the latest one? The CDNJS only contains the original work one. Ours are hosted at jsDelivr.

Canabale · Answer 2 · Thu Feb 09 2023 16:01:01 GMT+0800 (China Standard Time)

Thanks for the quick response @Jerit3787.
I updated the references but the bug still occures.
Would you mind doublechecking, if i selected the correct / latest sources now?
(And if not, maybe send me a link to the correct project on jsDelivr.)

Danish Hakim · Answer 3 · Thu Feb 09 2023 22:52:37 GMT+0800 (China Standard Time)

Thanks for the quick response @Jerit3787. I updated the references but the bug still occures. Would you mind doublechecking, if i selected the correct / latest sources now? (And if not, maybe send me a link to the correct project on jsDelivr.)

Hi @Canabale, yes indeed the included css & js files were the correct ones. This issue probably true due to the fact that Materialize haven't supported yet the 'shadowRoot' mechanisms/situations yet. Feel free to open up a pull request if you think that's okay. I can take a look from there. I really don't know how the inner code works, it might take time for others to help fix it :)

Daniel Wurzer · Answer 4 · Sun Feb 12 2023 02:40:07 GMT+0800 (China Standard Time)

You probably need to re-init the JS of the Labels:
I suggested some time ago this: #222
This would probably one way to solve your issue

Daniel Wurzer · Answer 5 · Wed Jun 14 2023 18:25:04 GMT+0800 (China Standard Time)

Have you tried it with the latest version 2.0.1-alpha?

Canabale · Answer 6 · Wed Jun 14 2023 22:16:45 GMT+0800 (China Standard Time)

i added a codepen for version 2.0.1
https://codepen.io/Canabale/pen/jOQWEzK

It actually looks worse than before. Did i do something wrong?

Mauro Mascarenhas de Araújo · Answer 7 · Sat Jun 17 2023 04:11:36 GMT+0800 (China Standard Time)

[](> >

i added a codepen for version 2.0.1 https://codepen.io/Canabale/pen/jOQWEzK

It actually looks worse than before. Did i do something wrong?

It is actually working, now 😄

You must provide a placeholder with a blank space in order for it to work properly (see "Floating Labels with CSS only" in the docs).

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<body>
  <m-element>
    <div class="input-field">
      <input id="email" type="email" placeholder=" ">
      <label for="email">Email</label>
    </div>
  </m-element>
</body>
</html>

UPDATE [1]: I'm already preparing a commit so the input fields will be able to display a custom placeholder (without floating labels) as well 😄

UPDATE [2]: Since you are working with "shadowRoot" (custom element), the new "dark mode" support will not let it to apply the proper colours (since the variables are mapped to root (check this link for more details)).

Mauro Mascarenhas de Araújo · Answer 8 · Wed Jul 12 2023 23:10:31 GMT+0800 (China Standard Time)

Closing this issue since it has been resolved in #384.
If there is another problem regarding the same topic (and sharing the same cause), this issue could be reopened.