View port boundary intersection detection for select field list box

[charlesr1971]

I have added view port boundary intersection detection for top & bottom boundaries. When the list box overlaps the bottom view port boundary, the list box is moved upwards, so that the entire list box is visible. When the list box overlaps the top view port boundary, the list box is moved downwards, so that the entire list box is visible

[zetta83]

Hey @charlesr1971 !
give me some time to look your PR 😃

[charlesr1971]

@zetta83 No worries. I just wasn’t sure if this project was still being worked on.

By the way, this is definitely the best mdl-selectfield, out there. I tried using a few others, but they were a bit buggy. And, I have noticed that the none of the others, use boundary detection. The Official Angular Material select element does use boundary detection, by the way.

It would be nice if the Google Team would get around to adding the select element to Material Lite, like they have for Angular Material! But, I guess this one, is a pretty damn good alternative :)

[charlesr1971]

@zetta83 I have also added OPTGROUP support.

Once an OPTGROUP tag is converted, it exhibits the characteristics of a disabled OPTION tag.
In other words, the cursor will not change to a pointer, when hovered over an OPTGROUP.

An OPTION within an OPTGROUP is indented and the OPTGROUP label text content is slightly more opaque than a disabled OPTION.

I have added the following class to an OPTGROUP:

is-optgroup

I have added the following class to an OPTGROUP OPTION:

is-option

This will add CSS hooks to allow users to add custom styling.

UPDATE:

Added is-option class to only OPTION tags that are nested inside an OPTGROUP tag. This allows the CSS to detect nested OPTION tags and style them accordingly:

.is-optgroup ~ .is-option {
    padding-left: 30px;
}

[charlesr1971]

@zetta83 I wasn't able to minify to:

/mdl-selectfield.min.js

You will find the JS changes in:

/src/selectfield/selectfield.js

To test my changes, open:

/src/selectfield/index.html