option-selector does not work proprly for long list of child

[roopal jain]

whenever there are large number of listing elements are present, closed option-selector list does not display properly.
When we select any element from end side list, so after closing the list that option does not get display in the center, it comes bit downside.

for better understanding I am attaching proper document with screenshots, please refer that.

Root Cause of this problem :-
After investigating 'option-selector.js' file I found that whenever we click on any option-selector to expand it, '__onclicked()' function adds 1px top border for each 'li' of the list below is the code from '__onclicked()' function

                else {
                    elm.classList.add('active');
                    elm.classList.remove('closed');
                    this.__open();
                    elm.style.borderTop = '1px solid #C7C7C7';
                }
so whenever we click on any option (in our case 'Colombia'), 13px has already been added above Colombia, so after closing the list it comes bit down side.

My Solution :-

To solve this issue my solution is one change in 'option-selector.js' file, that is whenever we close the list first code should remove those 1px top border, and whenever we will option the list those 1px top border will be added by code.
Below is the code solution inside '__onclicked()' function in 'option_selector.js' file.

         if (this.currentlyExpanded) {
              this.__close(this.currentIndex);
              elm.classList.add('active');
              elm.classList.add('closed');
/* added by roopal */
              for(i = 0, max = this.optionselector_ul_li.length; i < max; i++) {
                 this.optionselector_ul_li[i].style.borderTop='0';
              }
/*till here */
              elm.style.borderTop = '0';
          }

          else {
               elm.classList.add('active');
               elm.classList.remove('closed');
               this.__open();
/* added by roopal */
              for(i = 0, max = this.optionselector_ul_li.length; i < max; i++) {
               this.optionselector_ul_li[i].style.borderTop='1px solid #C7C7C7'; }
/*till here */
               elm.style.borderTop = '1px solid #C7C7C7';

[Adnane Belmadiaf (daker)]

Thanks Roopal for reporting this, i'll try to look at your patch in the next few days.

[Daniel Holbach (dholbach)]

Adnane: did the patch look all right?