Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Label animations in shadowRoot not working #329

Closed
3 tasks done
Canabale opened this issue Feb 4, 2023 · 8 comments
Closed
3 tasks done

[Bug]: Label animations in shadowRoot not working #329

Canabale opened this issue Feb 4, 2023 · 8 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@Canabale
Copy link

Canabale commented Feb 4, 2023 •
edited
Loading

Before submitting...

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...
@Canabale Canabale added the bug Something isn't working label Feb 4, 2023
@Jerit3787
Copy link

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
Copy link
Author

Canabale commented Feb 9, 2023

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

@Jerit3787
Copy link

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 :)

@Jerit3787 Jerit3787 added the help wanted Extra attention is needed label Feb 9, 2023
@wuda-io
Copy link
Member

wuda-io commented Feb 11, 2023

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

@wuda-io
Copy link
Member

wuda-io commented Jun 14, 2023

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

@Canabale
Copy link
Author

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?

@mauromascarenhas
Copy link

mauromascarenhas commented Jun 16, 2023 •
edited
Loading

[](> >

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

@mauromascarenhas mauromascarenhas mentioned this issue Jun 17, 2023
Merged
8 tasks
@mauromascarenhas
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mauromascarenhas @wuda-io @Jerit3787 @Canabale