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

Doesn't work with Materialize UI #16718

Open
sameer-coder opened this issue Apr 20, 2015 · 5 comments · May be fixed by #16805
Open

Doesn't work with Materialize UI #16718

sameer-coder opened this issue Apr 20, 2015 · 5 comments · May be fixed by #16805

Comments

@sameer-coder
Copy link

The materialize input box stop showing its default animation when clicked on a input box although autocomplete works.

<input id="demo" type="text" class="validate tooltipped awesomplete" data-position="bottom" data-delay="10" data-tooltip="Demo">
    var demo_input = document.getElementById("demo"); 
    new Awesomplete(demo_input, {
        list: ["W141001900", "W141001901", "W141001903", "W131001229" "W111001089"],
        minChars: 3,
        maxItems: 20
    });
@LeaVerou
Copy link
Owner

What animation was that? Is there a live demo of this anywhere?

@Garbee
Copy link

Garbee commented Apr 27, 2015

Seems to be talking about the materialize css framework. Not sure which animation is being discussed specifically though.

@sameer-coder
Copy link
Author

Yes the materialize framework. Its the input box placeholder text which gets animated when you click on it. but the minute you add the awesomplete class to the input that stops working. You can check the animation here http://materializecss.com/forms.html when you click on the last name input there is some animation there.

Got a jsfiddle for you here
https://jsfiddle.net/06Lt3vm9/2/

Try clicking on the last name without modifying the code. Then add the awesomplete class to the last name input and then see. Awesomplete works fine but the animation stops working

@erquhart
Copy link

This is happening because Materialize input/label animations require the two elements to be siblings, and awesomplete (like most (all?) autocomplete libs) wraps the target input in a template, making the input one DOM level lower than the label.

I'm actually using Materialize for a Chrome extension and am up against the same issue. The best concept I've mustered is using a class along the lines of awesomplete-include to indicate irrelevant siblings that need to be wrapped along with the input. Gets a tad complicated when you consider that multiple awesomplete instances may be running under the same DOM node, but this feature could simply require that target inputs not share a node with other target inputs.

I'll submit a PR if I crack it.

@erquhart erquhart mentioned this issue Jun 22, 2015
Closed
TxHawks added a commit to TxHawks/awesomplete that referenced this issue Dec 28, 2015
@TxHawks
Allow preexisting wrapper and custom class names
74c3e8f 
Closes LeaVerou#16718
@TxHawks TxHawks linked a pull request Dec 28, 2015 that will close this issue
Open
@clemsos
Copy link

clemsos commented Jul 20, 2016

Looks like it works well with Materialize for me. See code here http://codepen.io/clemsos/pen/pbLEJJ

@melitele melitele mentioned this issue May 27, 2018
Closed
melitele pushed a commit to melitele/awesomplete that referenced this issue May 27, 2018
container function to generate container element
4b6e170 
addresses a use case where container element cannot reuse input element parent
because input parent clips container content

also solves LeaVerou#17086 & LeaVerou#16718
@melitele melitele mentioned this issue May 27, 2018
Merged
melitele pushed a commit to melitele/awesomplete that referenced this issue May 30, 2018
container function to generate container element
bf33271 
addresses a use case where container element cannot reuse input element parent
because input parent clips container content

also solves LeaVerou#17086 & LeaVerou#16718
LeaVerou pushed a commit that referenced this issue May 30, 2018
@melitele @LeaVerou
container function to generate container element (#17143)
466bb15 
I've added a container function to options that will allow client to provide a different container element. The default version of container function creates container element as before. I believe this is in line with the item function that customizes creating item elements.

This addresses my use case where container element cannot reuse the input element parent
because the input parent clips container's content. It also addresses a case when input element has to be next to it's original siblings.

It also solves #17086 & #16718

Thank you for consideration.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
5 participants
@LeaVerou @clemsos @Garbee @erquhart @sameer-coder