Select does not work without jQuery

[wuda-io]

First: Thank you dudes! The compiliation process worked! Awesome... I see materialize is moving forward.

When I remove the jQuery dependency and there is a small issue when i am trying to expand a Select Component / DropDown Menu. The Error in the Console says:

Uncaught ReferenceError: $ is not defined
    getClosestAncestor https://localhost/_WORK/developing/AutoKMS/js/materialize.min.js:6
    value https://localhost/_WORK/developing/AutoKMS/js/materialize.min.js:6
    value https://localhost/_WORK/developing/AutoKMS/js/materialize.min.js:6
    value https://localhost/_WORK/developing/AutoKMS/js/materialize.min.js:6
materialize.min.js:6:14917

Steps to Reproduce (for bugs)

1. Create a Select (not multi)
2. Load Elements
3. Click on Select

Your Environment

• Version used: latest v1-dev from yesterday 20.10.2020
• Browser Name and version: Firefox 81
• Operating System and version (desktop or mobile): Windows 10 desktop

[AvnerCohen]

I suspect without jquery, you should be using the alternative init code:

				document.addEventListener('DOMContentLoaded', function() {
			    	  var elems = document.querySelectorAll('select');
			    	  var instances = M.FormSelect.init(elems);
			  	});

[wuda-io]

Yes I have done it exactly like you described it.
But it seems to be a bug somewhere in the newest version, because with the old versions it works without jquery.

My workaround for now is to include jquery...

[wuda-io]

Any updates on That?
The relevant Line is in the Global.js:

M.getClosestAncestor = function(el, condition) {
  let ancestor = el.parentNode
  while (ancestor !== null           >>>>>     && !$(ancestor).is(document)      <<<<        ) {
    if (condition(ancestor)) {
      return ancestor;
    }
    ancestor = ancestor.parentNode;
  }
  return null;
};

But when I comment the part out I still can not use the Library....
Who implemented this Function an why is it needed?
It seems that it was implemented later and was not Tested without jQuery! So you can mark this issue as a BUG!

I wanted to implement a better Select with Ajax-Loading and IDs instead of names and search in Dropdown.
But Materialize itself does not even work properly... thats really bad :(
maybe I better switch to the Material Design Light from Google

[wuda-io]

OK I fixed the Bug!!! Since the Function is only used in Dropdown.js at a specific place, here is the Solution:

    /**
     * Place dropdown
     */
    _placeDropdown() {
      // Container here will be closest ancestor with overflow: hidden
      
      const getClosestAncestor = function(el, condition) {
        let ancestor = el.parentNode;
        while (ancestor !== null && !$(ancestor).is(document)) {
          if (condition(ancestor)) {
            return ancestor;
          }
          ancestor = ancestor.parentNode;
        }
        return null;
      };


      let closestOverflowParent = getClosestAncestor(this.dropdownEl, (ancestor) => {
        return $(ancestor).css('overflow') !== 'visible';
      });

Now it Works!!! :) How does a pull request work

I also deleted the Function below, since it is never used...

M.elementOrParentIsFixed = function(element) {
  let $element = $(element);
  let $checkElements = $element.add($element.parents());
  let isFixed = false;
  $checkElements.each(function() {
    if ($(this).css('position') === 'fixed') {
      isFixed = true;
      return false;
    }
  });
  return isFixed;
};```

[wuda-io]

Dogfalo#6389