Hi,

I was trying this out with Vue2.0, in the view, I got it correct and working as expected, but it is not changing the model associated. Here is the code:

    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fullwidth">
      <input class="mdl-textfield__input" id="age" name="age" v-model="age" type="text" readonly tabIndex="-1" data-val="1"/>
        <label class="mdl-textfield__label" for="age">Age</label>
        <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="age">
          <li class="mdl-menu__item" data-val="1">1 Month Old</li>
          <li class="mdl-menu__item" data-val="11">11 Month Old</li>
        </ul>
    </div>

I have put v-model="age" with input field as given above, but age variable is not updating when selecting values from dropdown.

I tried to created a fiddle of this, however in fiddle, UI is not coming properly, in local atleast UI works properly.

When you click on a button to load the form through JavaSccript stops working.

What does it mean? Well, changing "country" does not accept it, ie it is fixed in Germany

HTML:

<div class="mdl-card__actions mdl-card--border"> <a onclick="myFunction()" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Get Started</a> </div>

<section class="maia-aux"> <div id="business"></div> </section>

The content loads in the "business"

And JavaScript

function myFunction() { registrationSection.classList.add('hide'); var business = document.getElementById('business'); business.innerHTML =

Hi,

I have many of these fields is my program I'm building. It's a dynamic form that allows for dynamically added and removing rows. The first row that appears on page load works fine. The rest of them, which are added by DOM are added and get upgraded it seems but when the dropdown appears and I click on a value, the doesn't actually select the value. The dropdown goes away and the field remains blank. Any help would be great! Thank you!

Can you pleas tag the current version with the appropriate version number.
This way it would become super simple to use your lib from Rails via https://rails-assets.org/#/
The site automatically bundle bower packages into rails gems but currently I get
No tag found that was able to satisfy 1.0.3if I enter your package

thx

Hello, All,
From the Github page, for dynamically created mdl, I should use:

getmdlSelect.init('.getmdl-select');
componentHandler.upgradeDom();

My use case is that when I trigger action, for example, click, it will added a new row, I am able to select it but the dropdown window won't close.

I had a look in stackoverflow, but it seems it doesn't answer the question.

Below is my jsfiddle example to show this issue.

Any suggestions on how to fix this problem?

Thanks in advance for the help.

Getting the following error when i include the into my project
getmdl-select.min.js:1Uncaught TypeError: Cannot set property 'onkeydown' of null(…)
addEventListeners @ getmdl-select.min.js: 1
(anonymous function) @ getmdl-select.min.js: 1
init @ getmdl-select.min.js: 1
window.onload @ getmdl-select.min.js: 1

using chrome Version 54.0.2840.98 (64-bit) iMac (27-inch, Mid 2011) sierra version 10.12.2 (16C67)

The overflow: hidden on .getmdl-select .mdl-menu__container and the overflow-y: auto on .getmdl-select__fix-height .mdl-menu__container is causing the shadow of the menu to be lost. This can be seen on both of the demo configurations.

Partially (sometimes fully) missing on:

and totally missing on:

compare to the mdl menu:

Hi!

Im using it with the rest of mdl, and i would like to know how to hanlde the select event, or if i should have to use the text input event instead? im a bit lost with the mdl event handlers.

thanks,

Bower install give me this message:
bower getmdl-select#* invalid-meta The "main" field cannot contain minified files

If the values in the list is more, then the elements are not scrollable it takes the whole page and also increases the page height of html document. I have attached the screenshot of the issue.

A nice feature may be for the field/dropdown to auto adjust width to the widest LI so options don't get cut off! Great project! So thankful to have found it!

There's 3 interactions we noticed that don't close the menu which we would expect to close the menu.

1. Pressing Tab on the keyboard to move to a next field.
   This could be fixed by updating the key listener to also listen for tabs and close the menu.
2. Pressing the Down arrow on an iPhone Previous/Next/Done bar. It moves the focus to the next input field just like Tab would, but the menu doesn't close.
3. Pressing the arrow on the input field after opening the menu

using the samples on your website, and my existing code, this has all stopped working. the selected value is now placed in the "value" attribute on the hidden input field, and is no longer placed in the "data-val" attribute on the readonly text input field. this breaks all existing functionality, inlcuding your own samples.

We are using the getmdl-select component within tab panels. If the component is contained within the active tab panel on page load, all is well. However, if the component is contained within an inactive tab panel, the width of the component is 0px.

Interestingly enough, if I remove the defer attribute from the script element, the component works as expected in both active and inactive tab panels.

Example HTML attached.

getmdl-select-tabs.html.txt

It would be helpful to be able to reference releases off a public CDN similar to code.getmdl.io. Thanks!

Hi there, for firefox the input box gets focused and the menu is never opened. Is this problem common to other people or have I set the component up wrong?

It seems to me that changes on the current input of getmdl-select can only be registered using the jquery "change" function. Event Listeners registered using the jquery "on" function are not triggered on input change. Is this the intended behavior?

Example:
https://jsfiddle.net/xv8tmzuk/1/

It would be great if you could give some feedback on this. Thx!

I have this definition for the Gender input:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fullwidth">

You can see the input is slightly less than what I have for the general textfield width. I noticed that a style="XXXpx; attribute is added directly to the element. When I turn this off in the browser, the input reverts to the correct width:

What I am thinking is, at the bottom of the JS script, this function sets the width:

       init: function (selector, widthDef) {
            var dropdowns = document.querySelectorAll(selector);
            [].forEach.call(dropdowns, function (i) {
                getmdlSelect.addEventListeners(i);
                var width = widthDef ? widthDef : (i.querySelector('.mdl-menu').offsetWidth ? i.querySelector('.mdl-menu').offsetWidth : getmdlSelect.defaultValue.width);
                i.style.width = width + 'px';
            });
        }

Instead of explicitly setting the width every time, only set the width when users haven't added the getmdl-select__fullwidth class? So since I have added the class, the JS won't alter the width of my input.

Nice work.

I ran into this issue while working on a CRM with a rather complex UI.

The DOMNodeInserted listener that gets added in window.onload calls componentHandler.upgradeDom() to ensure that dynamically added select boxes are upgraded properly. This has the side effect of upgrading the entire DOM every time any Node is inserted. This, in turn, causes (in my tests in Chrome) to return a bunch of Uncaught RangeError: Maximum call stack size exceeded errors.

I would suggest to:

• implement a targeted upgrade of the element being added
• perfoming the upgrade logic after ensuring that the newly inserted node is a potential candidate

I solved the issue in the meantime by simply removing the call to upgradeDom() and manually calling getmdlSelect.init('.getmdl-select'); where appropriate.

select is not working tried this:

    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
        <input class="mdl-textfield__input" type="text" id="sample2" value="Belarus" readonly tabIndex="-1">
        <label for="sample2">
            <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
        </label>
        <label for="sample2" class="mdl-textfield__label">Country</label>
        <ul for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item">Germany</li>
            <li class="mdl-menu__item">Belarus</li>
            <li class="mdl-menu__item">Russia</li>
        </ul>
    </div>

The getmdl-select structure was working normally and suddenly stopped working.

When I click on the input to open the select it appears this error:
Uncaught TypeError: Cannot set property 'value' of null
at r (src\js\getmdl-select.js:59)
at HTMLInputElement.t.onclick (src\js\getmdl-select.js:98)
r @ src\js\getmdl-select.js:59
t.onclick @ src\js\getmdl-select.js:98

The list of data appears normal and when I click to choose the option appears these two errors:
Uncaught TypeError: Cannot set property 'value' of null
at d (src\js\getmdl-select.js:41)
at HTMLLIElement.n.onclick (src\js\getmdl-select.js:175)
d @ src\js\getmdl-select.js:41
n.onclick @ src\js\getmdl-select.js:175

Uncaught TypeError: Cannot set property 'value' of null
at HTMLBodyElement.r (src\js\getmdl-select.js:59)
r @ src\js\getmdl-select.js:59

What could have happened to suddenly stop working?
Thanks

this is just a suggestion: Thank you for this code that allowed me to go on with MDL. Kindly add name="sample1" in the document to avoid confusion when the input is not giving back the value from the server upon submission of the form. Thank you again.

#8 Provide public object with method init

mdlSelect.init(cssSelector)
or try to subscribe on native mdl event http://www.getmdl.io/started/index.html#dynamic

When I submit a form containing your plugin example, the value sent to the server is 'Russia', not 'RU'.

Is this intended behaviour or am I misusing the plugin? Do I need to modify the form-submit using javascript or is normal HTTP form submission possible with this plugin.

My use case is Month selection

{January}
{February} etc.

But the value I want submitted to the server is 1, or 2

Thanks for your work,

Such as

Hi, I have an issue with the getmdl-select and its parent container.
The select doesn't display if the container is too small : https://i.imgur.com/Jrns1YI.png
The select's elements should appear in the blue square but they are hidden behind the mdl-card.

How to prevent this behavior ?

Thanks

It's related to this issue.

In native select fields, we have both the option value and the text to show to the user.

For example, value could be some id, but offcourse we don't want to show that id to the user, so we show some text instead.

Like:

<option value="999">Some text</option>

Is it possible to do similar with this plugin?

So i have a json file with all the country codes and i have got it to add it to the menu (see code) however it seems that because am showing every country the list does not want to scroll to the beginning but instead scroll way past the last country

					<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col getmdl-select getmdl-select__fix-height">
					 <input class="mdl-textfield__input" id="country" name="country" value="" type="text" readonly tabIndex="-1"/>
					   <label class="mdl-textfield__label" for="country">Country</label>
					   <ul id="countrymenu" class="mdl-menu mdl-menu--top-left mdl-js-menu" for="country">
						 
					   </ul>
				   </div>

and javascript

getJSON('/country.json').then(function(data) {
//    alert('Your Json result is:  ' + data.result); //you can comment this, i used it to debug
		//console.log("data: "+data);
		for (var p in data) {
			  var ul = document.getElementById("countrymenu");
				var li = document.createElement("li");
				li.setAttribute("data-val", p);
				li.setAttribute("class", "mdl-menu__item")
				li.appendChild(document.createTextNode(data[p]));
				ul.appendChild(li);
			
		}
		getmdlSelect.init(".getmdl-select");
	}, function(status) { //error detection....
	  alert('Something went wrong.');
	});

The Fixed Height dropdowns don't scroll on both IE11 and Edge, they will show the scrollbar but they are disabled, clicking them will close the select and using scroll wheel just scrolls the page.

Hi, in my app, the container and the input are automatically rebuilt after selecting a value in the drop down menu. My problem is that any click on the input field won't show the menu anymore. It looks like the reference is lost... Any idea how to re initialise the mennu or force it to show on click on the input?

Thanks!

Great job by the way... Keep it up

The Github repository for this project does not specify a license, however the bower.json file implies that the project is licensed under the MIT License and the package.json file implies that the project is licensed under the ISC License. There's no explicit license statement or list of copyright holders apart from what can be inferred in the contributors list.

It would be useful if you could include a license file to clarify permitted use.

Implementing websites' onload callback not called. Issue is caused by :

window.onload = function () { getmdlSelect.init('.getmdl-select'); document.addEventListener("DOMNodeInserted", function (ev) { if (ev.relatedNode.querySelectorAll(".getmdl-select").length > 0) { componentHandler.upgradeDom(); } }, false); };

You can use

window.addEventListener ? window.addEventListener("load",mWhenLoaded,false) : window.attachEvent && window.attachEvent("onload",mWhenLoaded);

function mWhenLoaded() {
    getmdlSelect.init('.getmdl-select');
    document.addEventListener("DOMNodeInserted", function (ev) {
        if (ev.relatedNode.querySelectorAll(".getmdl-select").length > 0) {
            componentHandler.upgradeDom();
        }
    }, false);
};`

a select has an option value and an option label

this select has only an option label

so i wont use it.

But anyway:

there was errors when loading your script.
They only occurred when loading radio boxes as well and hovering over them:

http://imageshack.com/i/pmRbMovdp

i could fix it by loading the scripts like this:

    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <script defer src="/js/mdl-select/getmdl-select.min.js"></script>

this way i would get errors:

    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <script src="/js/mdl-select/getmdl-select.min.js"></script>

would cause the errors (note, the mdl select script is loaded from localhost). i could not reproduce with codepen, maybe because the mdl-select script eventually ends up loading faster

I have a need for a default selected value from the drop down. I've added code to my js file to do it by adding data-selected="value" to the ul tag but it'd be a nice feature to have as part of the official codebase.

Hi

Whenever I pull down getmdl-select via npm install, the LICENSE.txt file doesn't seem to exist (but it does on Github). We need this in our build else we can't use the plugin.

Please could you add this?

Thanks

Easy steps to reproduce the issue:

• save http://creativeit.github.io/getmdl-select/ page in local. (in online page works well)
• run ".html" file in browser
• only some images won't load
• but select does nothing on click (any error in console)

What I'm missing?
Something needs to compile?

(chrome in ubuntu)

How to use this dynamically? Upgrade elements not working.

I would like to do add getmdl-select with a textfield in one line, something like this:

The textfield New York, getmdl-select NY and textfield Postcode in one line.

Sorry I am new to this, so any help would be appreciated. Thanks

As mentioned in Google Material, the menu should appear over the element.

I am trying to load a large number of items with the select box. What I'm finding is that up to about 15 items it seems to load each menu item quickly (small delay). Above that it gets painfully slow (about 5 seconds to load 100 items, 10 seconds to load 200 items).

This getmdl-select works with Angular?

Any sample?

How to give height from jquery to this control?

i cant make it work to populate li inside ul using ajax

Ok so I found a small issue and that is your javascript code is make both of the select boxes the same width.

They both use the same code, but while it was working fine before I placed the gender drop down option into my form, it seems that the JS reverts to the first select object it finds? please correct me if I am wrong

the new code (gender drop down)

 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col getmdl-select getmdl-select__fix-height">
							 <input class="mdl-textfield__input" id="gender" name="gender" value="" type="text" tabIndex="-1"/>
							 <label class="mdl-textfield__label" for="gender">Gender</label>
						  <ul id="gendermenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="gender">	 
							<li data-val="M" class="mdl-menu__item">Male</li>
							<li data-val="F" class="mdl-menu__item">Female</li>
							<li data-val="X" class="mdl-menu__item">Indeterminate/Intersex/Unspecified</li>
						  </ul>
						</div>

the Country dropdown html

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col getmdl-select getmdl-select__fix-height">
   						 <input class="mdl-textfield__input" id="country" name="country" value="" type="text" tabIndex="-1"/>
   						 <label class="mdl-textfield__label" for="country">Country</label>
   					  <ul id="countrymenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="country">	 
   					   </ul>
   					  </div>

now the javascript loads after the the above code

it runs this JS

(function(){
	
select = document.getElementById('country');
	
	getJSON('//new.ipet.xyz/vendor/umpirsky/country-list/data/en_US/country.json').then(function(data) {
//    alert('Your Json result is:  ' + data.result); //you can comment this, i used it to debug
		//console.log("data: "+data);
		for (var p in data) {
			  var ul = document.getElementById("countrymenu");
				var li = document.createElement("li");
				li.setAttribute("data-val", p);
				li.setAttribute("class", "mdl-menu__item")
				li.appendChild(document.createTextNode(data[p]));
				ul.appendChild(li);
			
		}
		getmdlSelect.init("#genderoption");
		getmdlSelect.init("#countryoption");
	}, function(status) { //error detection....
	  alert('Something went wrong.');
	});

})();

I have isolated the problem and it is with the getmdlselect/getmdl-select.min.js it seem to change the width of the options which overrides my style. I need it to be mdl-cell--3-col

Dynamic data is displayed in drop down list but when we try to select item from drop down nothing is happened, selected item not set to the label

In getmdl-select.js:34 I get width 0px so elements are not visible.

If I run getmdlSelect.init('.getmdl-select'); again I get a correct width but not what I want, because I want the default 300px of .mdl-textfield (or whatever I would like to set in my CSS).

I would add an option to enable that line, like a new class getmdl-select-autowidth.

Anyway, if you enable that line, it seems that it may get 0px like in my case.

When a page contains a large number of MDL components, both Safari and IE will lock up for as long as 30 seconds or so.

For some reason, this line doesn't update the CSS classes well:

dropdown.MaterialTextfield.change(li.textContent);

It adds is-dirty but it doesn't remove is-focused so the field appears as focused (with a color underline), even when you click on other places or fields.

I have found this hack. For some reason I have to wait, it doesn't work when called immediately after change:

setTimeout( function() { dropdown.MaterialTextfield.updateClasses_(); }, 250 );

It's quite dirty, and I would prefer to lose focus after clicking somewhere else, but I don't know how to do it.

It doesn't seem to support tabbing, arrow keys, and typing like a normal <select> does.