issue with input element in forms when the input has a wave effect

[aristath]

Trying to implement materialize for an e-commerce solution...
One of the forms has the following structure:

<form id="edd_purchase_470124-2" class="edd_download_purchase_form edd_purchase_470124" method="post">
    <div class="edd_purchase_submit_wrapper">
        <input type="submit" class="edd-add-to-cart edd-no-js button red waves-effect waves-light btn radius" name="edd_purchase_download" value="Free&nbsp;–&nbsp;Download" data-action="edd_add_to_cart" data-download-id="470124" data-variable-price="no" data-price-mode="single">
        <a href="http://domain.com/checkout/" class="edd_go_to_checkout button red waves-effect waves-light btn radius" style="display:none;">
            Checkout
        </a>
    </div>
    <input type="hidden" name="download_id" value="470124">
    <input type="hidden" name="edd_action" class="edd_action_input" value="add_to_cart">
</form>

waves.js transforms that form to this:

<form id="edd_purchase_470124-2" class="edd_download_purchase_form edd_purchase_470124" method="post">
    <div class="edd_purchase_submit_wrapper">
        <i class="edd-add-to-cart edd-no-js button red waves-effect waves-light btn radius waves-input-wrapper" style="">
            <input type="submit" class="waves-button-input" name="edd_purchase_download" value="Free&nbsp;–&nbsp;Download" data-action="edd_add_to_cart" data-download-id="470124" data-variable-price="no" data-price-mode="single">
        </i>
        <a href="http://domain.com/checkout/" class="edd_go_to_checkout button red waves-effect waves-light btn radius" style="display:none;">
            Checkout
        </a>
    </div>
    <input type="hidden" name="download_id" value="470124">
    <input type="hidden" name="edd_action" class="edd_action_input" value="add_to_cart">
</form>

As a result I'm seeing a button inside a button.

The problem seems to be located on

materialize/js/waves.js

Lines 197 to 235 in 9e41e8b

	// Little hack to make <input> can perform waves effect
	wrapInput: function(elements) {
	for (var a = 0; a < elements.length; a++) {
	var el = elements[a];
	if (el.tagName.toLowerCase() === 'input') {
	var parent = el.parentNode;
	// If input already have parent just pass through
	if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) {
	return false;
	}
	// Put element class and style to the specified parent
	var wrapper = document.createElement('i');
	wrapper.className = el.className + ' waves-input-wrapper';
	var elementStyle = el.getAttribute('style');
	if (!elementStyle) {
	elementStyle = '';
	}
	wrapper.setAttribute('style', elementStyle);
	el.className = 'waves-button-input';
	el.removeAttribute('style');
	// Put element as child
	parent.replaceChild(wrapper, el);
	wrapper.appendChild(el);
	}
	}
	}

but unfortunately my JS skills are limited so I can't figure this one out..

[Dogfalo]

Use the <button> tag instead. Take a look at the "Submit Button" section on http://materializecss.com/buttons.html

[james12]

waves effects not working in self closed elements..